From 2f1f62c103588554afb3cff3bd03f4cea50faf7b Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 10 Dec 2025 11:23:00 -0800 Subject: [PATCH 01/18] move mapping and change capitalization --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 32 +++++++++---------- packages/dev/s2-docs/src/styleProperties.ts | 8 ++--- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index a01f6d8afc9..3a884adc164 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -18,7 +18,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - '{val}' + {val} ))} @@ -31,7 +31,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - '{val}' + {val} ))} @@ -79,7 +79,7 @@ const styleMacroValueDesc: RecordA CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh' }, 'number': { @@ -118,6 +118,19 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
+ {propDef.mapping && ( +
+

Maps to

+ + {propDef.mapping.map((mappedProp, i) => ( + + {i > 0 && Punctuation(', ')} + {mappedProp} + + ))} + +
+ )} {/* for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values */} {(() => { if (propertyName === 'color') { @@ -254,19 +267,6 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { } return null; })} - {propDef.mapping && ( -
-

Maps to

- - {propDef.mapping.map((mappedProp, i) => ( - - {i > 0 && Punctuation(', ')} - {mappedProp} - - ))} - -
- )} {propDef.description && (
{propDef.description} diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index ad1e6501f16..e07420c6731 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -// Properties that use PercentageProperty (accept LengthPercentage in addition to mapped values) +// Properties that use PercentageProperty (accept lengthPercentage in addition to mapped values) const percentageProperties = new Set([ 'top', 'left', 'bottom', 'right', 'insetStart', 'insetEnd', @@ -19,7 +19,7 @@ const percentageProperties = new Set([ 'textIndent', 'translateX', 'translateY' ]); -// Properties that use SizingProperty (accept number and LengthPercentage in addition to mapped values) +// Properties that use SizingProperty (accept number and lengthPercentage in addition to mapped values) const sizingProperties = new Set([ 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flexBasis', 'containIntrinsicWidth', 'containIntrinsicHeight' @@ -450,11 +450,11 @@ export function getAdditionalTypes(propertyName: string): string[] { } if (sizingProperties.has(propertyName)) { - types.push('number', 'LengthPercentage'); + types.push('number', 'lengthPercentage'); } if (percentageProperties.has(propertyName)) { - types.push('LengthPercentage'); + types.push('lengthPercentage'); } return types; From f9138e6d85b4f7f5ac80bd78ab5ae99997591369 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 10 Dec 2025 11:59:15 -0800 Subject: [PATCH 02/18] make values a bulleted list --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 134 ++++++------------ 1 file changed, 47 insertions(+), 87 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 3a884adc164..5b2c3bd71b7 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -50,7 +50,6 @@ const styleMacroValueDesc: RecordbaseColors consists of the following values below:, body: ( <> @@ -152,8 +151,22 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { return (

Values

- +
    {values.map((value, i) => { + let valueDesc = styleMacroValueDesc[value]; + // special case handling for font and spacing specific value descriptions so they don't get rendered for + // other properties that may include the same values (e.g. heading in Colors) + let shouldShowDescription = false; + if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { + shouldShowDescription = true; + } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { + shouldShowDescription = true; + } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { + shouldShowDescription = true; + } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { + shouldShowDescription = true; + } + let content; if (links[value]) { content = ( @@ -172,101 +185,48 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { } return ( - - {i > 0 && Punctuation(' | ')} - {content} - +
  • + + {content} + + {shouldShowDescription && valueDesc?.description && ( +
    + {valueDesc.description} +
    + )} + {shouldShowDescription && valueDesc?.body && ( +
    + {valueDesc.body} +
    + )} +
    • ); })} {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { + let typeDesc = styleMacroValueDesc[typeName]; return ( - - {(values.length > 0 || i > 0) && Punctuation(' | ')} - {typeName} - +
  • + + {typeName} + + {typeDesc?.description && ( +
    + {typeDesc.description} +
    + )} + {typeDesc?.body && ( +
    + {typeDesc.body} +
    + )} +
    • ); })} -     +
); })()} - {values.map((value, i) => { - let valueDesc = styleMacroValueDesc[value]; - // special case handling for font and spacing specific value descriptions so they don't get rendered for - // other properties that may include the same values (e.g. heading in Colors) - // skip baseColors here as it will be rendered after - let shouldShowDescription = false; - if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { - shouldShowDescription = true; - } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { - shouldShowDescription = true; - } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { - shouldShowDescription = true; - } - - if (shouldShowDescription && (valueDesc?.description || valueDesc?.body)) { - return ( -
-

- - '{value}' - -

- {valueDesc.description && ( -

- {valueDesc.description} -

- )} - {valueDesc.body} -
- ); - } - return null; - })} - {/* show S2Typography for "fontSize" property and "font" shorthand specificatlly */} - {(propertyName === 'fontSize' || propertyName === 'font') && ( - - )} - {/* for other color property names show baseColors description since the value list is displayed still */} - {values.includes('baseColors') && styleMacroValueDesc['baseColors'] && (propertyName !== 'color' && propertyName !== 'backgroundColor') && ( -
- {styleMacroValueDesc['baseColors'].description && ( -

- {styleMacroValueDesc['baseColors'].description} -

- )} - {styleMacroValueDesc['baseColors'].body} -
- )} - {/* for the types that have descriptions, we add them below with the associated descriptions and/or mappings */} - {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { - let typeLink = styleMacroValueDesc[typeName]; - if (typeLink?.description || typeLink?.body) { - // dont render the type name for properties that only have one special value (e.g. baseSpacing) that has an associated description - // so that we don't double up on rendering the value name - let shouldSkipTypeName = values.length === 0 && propDef.additionalTypes?.length === 1; - - return ( -
- {!shouldSkipTypeName && ( -

- - {typeName} - -

- )} - {typeLink.description && ( -

- {typeLink.description} -

- )} - {typeLink.body} -
- ); - } - return null; - })} {propDef.description && (
{propDef.description} From 0cb09108d75fb29396dffa1782fe5b9b56ce4bd7 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 10 Dec 2025 16:14:54 -0800 Subject: [PATCH 03/18] restore pipe separation for some number only values --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 250 ++++++++++-------- packages/dev/s2-docs/src/styleProperties.ts | 46 ++-- 2 files changed, 164 insertions(+), 132 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 5b2c3bd71b7..b83fc642827 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -18,7 +18,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - {val} + {val} ))} @@ -31,7 +31,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - {val} + {val} ))} @@ -116,123 +116,149 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { -
- {propDef.mapping && ( -
-

Maps to

- - {propDef.mapping.map((mappedProp, i) => ( - - {i > 0 && Punctuation(', ')} - {mappedProp} - - ))} - -
- )} - {/* for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values */} - {(() => { - if (propertyName === 'color') { - return ( - - - {styleMacroValueDesc['baseColors'].body} - - ); - } - if (propertyName === 'backgroundColor') { - return ( - - - {styleMacroValueDesc['baseColors'].body} - - ); - } - return ( -
-

Values

-
    - {values.map((value, i) => { - let valueDesc = styleMacroValueDesc[value]; - // special case handling for font and spacing specific value descriptions so they don't get rendered for - // other properties that may include the same values (e.g. heading in Colors) - let shouldShowDescription = false; - if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { - shouldShowDescription = true; - } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { - shouldShowDescription = true; - } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { - shouldShowDescription = true; - } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { - shouldShowDescription = true; - } + {(() => { + // if all values are numbers, we will render with pipes instead of bullets + let allValuesAreNumbers = values.every(v => typeof v === 'number'); - let content; - if (links[value]) { - content = ( - - {value} - - ); - } else if (value === 'baseColors') { - content = {value}; - } else { - content = '{value}'; - } + return ( +
    + {propDef.mapping && ( +
    +

    Maps to

    + + {propDef.mapping.map((mappedProp, i) => ( + + {i > 0 && Punctuation(', ')} + {mappedProp} + + ))} + +
    + )} + {(() => { + // for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values + if (propertyName === 'color') { + return ( + + + {styleMacroValueDesc['baseColors'].body} + + ); + } + if (propertyName === 'backgroundColor') { + return ( + + + {styleMacroValueDesc['baseColors'].body} + + ); + } - return ( -
  • + return ( +
    +

    Values

    + {allValuesAreNumbers ? ( +
    - {content} + {values.map((value, i) => ( + + {i > 0 && Punctuation(' | ')} + {value} + + ))} - {shouldShowDescription && valueDesc?.description && ( -
    - {valueDesc.description} -
    - )} - {shouldShowDescription && valueDesc?.body && ( -
    - {valueDesc.body} + {propDef.description && ( +
    + {propDef.description}
    )} -
    • - ); - })} - {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} - {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { - let typeDesc = styleMacroValueDesc[typeName]; - return ( -
  • - - {typeName} - - {typeDesc?.description && ( -
    - {typeDesc.description} -
    - )} - {typeDesc?.body && ( -
    - {typeDesc.body} -
    - )} -
    • - ); - })} -
-
- ); - })()} - {propDef.description && ( -
- {propDef.description} +
+ ) : ( +
    + {values.map((value, i) => { + let valueDesc = styleMacroValueDesc[value]; + // special case handling for font and spacing specific value descriptions so they don't get rendered for + // other properties that may include the same values (e.g. heading in Colors) + let shouldShowDescription = false; + if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { + shouldShowDescription = true; + } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { + shouldShowDescription = true; + } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { + shouldShowDescription = true; + } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { + shouldShowDescription = true; + } + + let content; + if (links[value]) { + content = ( + + {value} + + ); + } else if (value === 'baseColors') { + content = {value}; + } else { + content = '{value}'; + } + + return ( +
  • + + {content} + + {shouldShowDescription && valueDesc?.description && ( +
    + {valueDesc.description} +
    + )} + {shouldShowDescription && valueDesc?.body && ( +
    + {valueDesc.body} +
    + )} +
    • + ); + })} + {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} + {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { + let typeDesc = styleMacroValueDesc[typeName]; + return ( +
  • + + {typeName} + + {typeDesc?.description && ( +
    + {typeDesc.description} +
    + )} + {typeDesc?.body && ( +
    + {typeDesc.body} +
    + )} +
    • + ); + })} +
+ )} +
+ ); + })()} + {propDef.description && !allValuesAreNumbers && ( +
+ {propDef.description} +
+ )}
- )} -
+ ); + })()} ); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index e07420c6731..877a4514144 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -44,8 +44,8 @@ const negativeSpacingProperties = new Set([ ]); // Spacing values used across multiple properties -const baseSpacingValues = ['0', '2', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48', '56', '64', '80', '96']; -const negativeBaseSpacingValues = ['-2', '-4', '-8', '-12', '-16', '-20', '-24', '-28', '-32', '-36', '-40', '-44', '-48', '-56', '-64', '-80', '-96']; +const baseSpacingValues = [0, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96]; +const negativeBaseSpacingValues = [-2, -4, -8, -12, -16, -20, -24, -28, -32, -36, -40, -44, -48, -56, -64, -80, -96]; const relativeSpacingValues = ['text-to-control', 'text-to-visual', 'edge-to-text', 'pill']; const heightBaseValues = ['auto', 'full', 'min', 'max', 'fit', 'screen']; const fontSize = [ @@ -86,7 +86,7 @@ const colorPropertyValues: {[key: string]: string[]} = { stroke: ['none', 'currentColor', 'baseColors'] }; -const dimensionsPropertyValues: {[key: string]: string[]} = { +const dimensionsPropertyValues: {[key: string]: (string | number)[]} = { borderSpacing: [], flexBasis: ['auto', 'full'], rowGap: relativeSpacingValues, @@ -99,12 +99,12 @@ const dimensionsPropertyValues: {[key: string]: string[]} = { maxHeight: [...heightBaseValues, 'none'], minWidth: heightBaseValues, maxWidth: [...heightBaseValues, 'none'], - borderStartWidth: ['0', '1', '2', '4'], - borderEndWidth: ['0', '1', '2', '4'], - borderTopWidth: ['0', '1', '2', '4'], - borderBottomWidth: ['0', '1', '2', '4'], + borderStartWidth: [0, 1, 2, 4], + borderEndWidth: [0, 1, 2, 4], + borderTopWidth: [0, 1, 2, 4], + borderBottomWidth: [0, 1, 2, 4], borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'], - strokeWidth: ['0', '1', '2'], + strokeWidth: [0, 1, 2], marginStart: ['auto'], marginEnd: ['auto'], marginTop: ['auto'], @@ -138,7 +138,7 @@ const dimensionsPropertyValues: {[key: string]: string[]} = { aspectRatio: ['auto', 'square', 'video', 'number / number'] }; -const textPropertyValues: {[key: string]: string[]} = { +const textPropertyValues: {[key: string]: (string | number)[]} = { fontFamily: ['sans', 'serif', 'code'], fontSize: fontSize, fontWeight: ['normal', 'medium', 'bold', 'extra-bold', 'black', 'heading', 'title', 'detail'], @@ -159,7 +159,7 @@ const textPropertyValues: {[key: string]: string[]} = { boxDecorationBreak: ['slice', 'clone'] }; -const effectsPropertyValues: {[key: string]: string[]} = { +const effectsPropertyValues: {[key: string]: (string | number)[]} = { boxShadow: ['emphasized', 'elevated', 'dragged', 'none'], filter: ['emphasized', 'elevated', 'dragged', 'none'], borderTopStartRadius: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], @@ -181,7 +181,7 @@ const effectsPropertyValues: {[key: string]: string[]} = { opacity: ['number'], outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'], outlineOffset: ['number'], - outlineWidth: ['0', '1', '2', '4'], + outlineWidth: [0, 1, 2, 4], transition: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'], transitionDelay: ['string', 'number'], transitionDuration: ['string', 'number'], @@ -196,7 +196,7 @@ const effectsPropertyValues: {[key: string]: string[]} = { animationPlayState: ['paused', 'running'] }; -const layoutPropertyValues: {[key: string]: string[]} = { +const layoutPropertyValues: {[key: string]: (string | number)[]} = { display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'list-item', 'none'], alignContent: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'], alignItems: ['start', 'end', 'center', 'baseline', 'stretch'], @@ -237,7 +237,7 @@ const layoutPropertyValues: {[key: string]: string[]} = { order: ['number'] }; -const miscPropertyValues: {[key: string]: string[]} = { +const miscPropertyValues: {[key: string]: (string | number)[]} = { pointerEvents: ['none', 'auto'], touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'], userSelect: ['none', 'text', 'all', 'auto'], @@ -259,7 +259,7 @@ const miscPropertyValues: {[key: string]: string[]} = { caretColor: ['auto', 'transparent'] }; -const shorthandMapping: {[key: string]: {values: string[], mapping: string[]}} = { +const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: string[]}} = { padding: { values: relativeSpacingValues, mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] @@ -309,15 +309,15 @@ const shorthandMapping: {[key: string]: {values: string[], mapping: string[]}} = mapping: ['scrollMarginTop', 'scrollMarginBottom'] }, borderWidth: { - values: ['0', '1', '2', '4'], + values: [0, 1, 2, 4], mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'] }, borderXWidth: { - values: ['0', '1', '2', '4'], + values: [0, 1, 2, 4], mapping: ['borderStartWidth', 'borderEndWidth'] }, borderYWidth: { - values: ['0', '1', '2', '4'], + values: [0, 1, 2, 4], mapping: ['borderTopWidth', 'borderBottomWidth'] }, borderRadius: { @@ -428,7 +428,7 @@ const conditionMapping: {[key: string]: string[]} = { '2xl': ['@media (min-width: ${pxToRem(1536)})'] }; -const properties: {[key: string]: {[key: string]: string[]}} = { +const properties: {[key: string]: {[key: string]: (string | number)[]}} = { color: colorPropertyValues, dimensions: dimensionsPropertyValues, text: textPropertyValues, @@ -502,11 +502,17 @@ const propertyDescriptions: {[key: string]: string} = { 'transitionShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'truncateShortHand': 'Applying this shorthand will enable text truncation.', - 'fontShortHand': 'The "fontSize" provided defines the values this shorthand sets on the mapped values.' + 'fontShortHand': 'The "fontSize" provided defines the values this shorthand sets on the mapped values.', + 'borderStartWidth': 'These values map to pixels.', + 'borderEndWidth': 'These values map to pixels.', + 'borderTopWidth': 'These values map to pixels.', + 'borderBottomWidth': 'These values map to pixels.', + 'outlineWidth': 'These values map to pixels.', + 'strokeWidth': 'These values map to pixels.' }; interface StyleMacroPropertyDefinition { - values: string[], + values: (string | number)[], additionalTypes?: string[], links?: {[value: string]: {href: string, isRelative?: boolean}}, description?: string, From 4cdd7100790b0e7b3843c19b57e0773ad37e45d9 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 10 Dec 2025 17:10:13 -0800 Subject: [PATCH 04/18] render color swatches for fill/etc and fix render of values for borderSpacing --- packages/dev/s2-docs/src/S2Colors.tsx | 2 +- .../dev/s2-docs/src/StyleMacroProperties.tsx | 126 +++++++++++++++++- packages/dev/s2-docs/src/styleProperties.ts | 3 +- 3 files changed, 127 insertions(+), 4 deletions(-) diff --git a/packages/dev/s2-docs/src/S2Colors.tsx b/packages/dev/s2-docs/src/S2Colors.tsx index 977c986f752..6a622d7b910 100644 --- a/packages/dev/s2-docs/src/S2Colors.tsx +++ b/packages/dev/s2-docs/src/S2Colors.tsx @@ -151,7 +151,7 @@ function ColorScale({scale}) { )); } -function Color({name, className}) { +export function Color({name, className}) { return (
diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index b83fc642827..3a968e5f8de 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -1,7 +1,8 @@ import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2'; -import {BackgroundColorsDisclosure, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors'; +import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors'; import {styles as codeStyles} from './Code'; import {ColorLink} from './Link'; +import {colorSwatch} from './color.macro' with {type: 'macro'}; import {Punctuation} from './types'; import React, {ReactNode} from 'react'; import {S2Typography} from './S2Typography'; @@ -10,6 +11,45 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}}); +function BaseColorsAccordion() { + return ( +
+ + {styleMacroValueDesc['baseColors'].body} + +
+ ); +} + +function NoneValueListItem() { + return ( +
  • + + 'none' + +
    + {styleMacroValueDesc['none'].description} +
    +
    • + ); +} + +function CurrentColorListItem({links}: {links: {[value: string]: {href: string, isRelative?: boolean}}}) { + return ( +
  • + + + currentColor + + +
    • + ); +} + const styleMacroValueDesc: Record = { 'baseSpacing': { description: 'Base spacing values in pixels, following a 4px grid. Will be converted to rem.', @@ -83,6 +123,9 @@ const styleMacroValueDesc: RecordA numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices. + }, + 'none': { + description: 'No value applied.' } }; @@ -118,7 +161,7 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { {(() => { // if all values are numbers, we will render with pipes instead of bullets - let allValuesAreNumbers = values.every(v => typeof v === 'number'); + let allValuesAreNumbers = values.length > 0 && values.every(v => typeof v === 'number'); return (
    @@ -154,6 +197,85 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { ); } + // for borderColor, outlineColor, fill, and stroke, render color swatches + if (propertyName === 'borderColor') { + return ( +
    +

    Values

    +
    + + +
    + +
    + ); + } + + if (propertyName === 'outlineColor') { + return ( +
    +

    Values

    +
    + +
    + +
    + ); + } + + if (propertyName === 'fill') { + return ( +
    +

    Values

    +
      + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + ); + } + + if (propertyName === 'stroke') { + return ( +
    +

    Values

    +
      + + +
    + +
    + ); + } + return (

    Values

    diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 877a4514144..89ef49927fa 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -468,7 +468,8 @@ export const spacingTypeValues = { // a mapping of value to mdn links that should be replaced in place const mdnTypeLinks: {[key: string]: string} = { 'string': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String', - 'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number' + 'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number', + 'currentColor': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword' }; // a mapping of value to links that should be replaced in place with the provided string From d19ab5098d7d0c971e1f51cbb6f87caf2bdd5661 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 10 Dec 2025 17:23:28 -0800 Subject: [PATCH 05/18] add back font typography section and sort values alphabetically --- packages/dev/s2-docs/src/StyleMacroProperties.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 3a968e5f8de..62489076a68 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -142,7 +142,7 @@ interface StyleMacroPropertiesProps { } export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { - let propertyNames = Object.keys(properties); + let propertyNames = Object.keys(properties).sort(); return ( @@ -197,6 +197,11 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { ); } + // for fontSize and font, render typography examples + if (propertyName === 'fontSize' || propertyName === 'font') { + return ; + } + // for borderColor, outlineColor, fill, and stroke, render color swatches if (propertyName === 'borderColor') { return ( From 30eff795969c7da82a9993a9701c63dc929e794a Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 10:54:38 -0800 Subject: [PATCH 06/18] move shorthands into related properties --- packages/dev/s2-docs/pages/s2/style-macro.mdx | 10 +--- .../dev/s2-docs/src/StyleMacroProperties.tsx | 50 ++++++++++++++++++- packages/dev/s2-docs/src/styleProperties.ts | 19 ++++++- 3 files changed, 68 insertions(+), 11 deletions(-) diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx index 2c77970a104..5b7990964d7 100644 --- a/packages/dev/s2-docs/pages/s2/style-macro.mdx +++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx @@ -1,7 +1,7 @@ import {Layout} from '../../src/Layout'; import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2'; import {StyleMacroProperties} from '../../src/StyleMacroProperties'; -import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties'; +import {getPropertyDefinitions} from '../../src/styleProperties'; export default Layout; export const section = 'Components'; @@ -24,7 +24,7 @@ All Spectrum 2 color tokens are available across color properties (e.g., `backgr ## Text -Spectrum 2 typography can be applied via the `font` [shorthand](#shorthands), which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually. +Spectrum 2 typography can be applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually. Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs. ```tsx @@ -52,12 +52,6 @@ Note that `font` should be applied on a per element basis rather than globally s -## Shorthands - -Shorthands apply their provided value to commonly grouped properties. - - - ## Conditions diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 62489076a68..26c191e9e29 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -3,10 +3,10 @@ import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, SemanticColor import {styles as codeStyles} from './Code'; import {ColorLink} from './Link'; import {colorSwatch} from './color.macro' with {type: 'macro'}; +import {getPropertyToShorthandsMapping, getShorthandDefinitions, spacingTypeValues} from './styleProperties'; import {Punctuation} from './types'; import React, {ReactNode} from 'react'; import {S2Typography} from './S2Typography'; -import {spacingTypeValues} from './styleProperties'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}}); @@ -143,6 +143,8 @@ interface StyleMacroPropertiesProps { export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { let propertyNames = Object.keys(properties).sort(); + let propertyToShorthands = getPropertyToShorthandsMapping(); + let shorthandDefs = getShorthandDefinitions(); return ( @@ -150,6 +152,7 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { let propDef = properties[propertyName]; let values = propDef.values; let links = propDef.links || {}; + let associatedShorthands = propertyToShorthands[propertyName] || []; return ( @@ -386,6 +389,51 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
    ); })()} + {associatedShorthands.length > 0 && ( +
    +

    + Shorthands +

    + {associatedShorthands.map((shorthandName, idx) => { + let shorthandDef = shorthandDefs[shorthandName]; + return ( +
    + + {shorthandName} + + {shorthandDef.mapping && ( +
    + Maps to:{' '} + + {shorthandDef.mapping.map((prop, i) => ( + + {i > 0 && ', '} + {prop} + + ))} + +
    + )} + {shorthandDef.description && ( +
    + {shorthandName === 'font' && propertyName === 'color' ? ( + <> + The{' '} + + fontSize + + {' '}provided defines the values this shorthand sets on the mapped values. + + ) : ( + shorthandDef.description + )} +
    + )} +
    + ); + })} +
    + )} ); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 89ef49927fa..51bd02425a0 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -500,10 +500,10 @@ const propertyDescriptions: {[key: string]: string} = { 'scaleY': 'Accepts a number or percentage string.', 'scaleShortHand': 'Accepts a number or percentage string.', 'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).', - 'transitionShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', + 'transitionShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'truncateShortHand': 'Applying this shorthand will enable text truncation.', - 'fontShortHand': 'The "fontSize" provided defines the values this shorthand sets on the mapped values.', + 'fontShortHand': 'The fontSize provided defines the values this shorthand sets on the mapped values.', 'borderStartWidth': 'These values map to pixels.', 'borderEndWidth': 'These values map to pixels.', 'borderTopWidth': 'These values map to pixels.', @@ -583,3 +583,18 @@ export function getShorthandDefinitions(): {[key: string]: StyleMacroPropertyDef return result; } + +export function getPropertyToShorthandsMapping(): {[propertyName: string]: string[]} { + let result: {[propertyName: string]: string[]} = {}; + + for (let [shorthandName, shorthandDef] of Object.entries(shorthandMapping)) { + for (let propertyName of shorthandDef.mapping) { + if (!result[propertyName]) { + result[propertyName] = []; + } + result[propertyName].push(shorthandName); + } + } + + return result; +} From 63e2268de6570b4c1091cd7d43698c3ec5caac7b Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 11:11:03 -0800 Subject: [PATCH 07/18] double check shorthands mappings --- packages/dev/s2-docs/src/StyleMacroProperties.tsx | 4 ++-- packages/dev/s2-docs/src/styleProperties.ts | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 26c191e9e29..066ca0ac0e5 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -418,11 +418,11 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
    {shorthandName === 'font' && propertyName === 'color' ? ( <> - The{' '} + Accepts the same values as{' '} fontSize - {' '}provided defines the values this shorthand sets on the mapped values. + . The fontSize provided defines the values this shorthand sets on the mapped values. ) : ( shorthandDef.description diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 51bd02425a0..d9cd0e0b104 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -365,11 +365,11 @@ const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: s mapping: ['alignItems', 'justifyItems'] }, placeContent: { - values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'], + values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'stretch'], mapping: ['alignContent', 'justifyContent'] }, placeSelf: { - values: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'], + values: ['auto', 'start', 'end', 'center', 'stretch'], mapping: ['alignSelf', 'justifySelf'] }, gap: { @@ -409,7 +409,7 @@ const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: s mapping: ['animation', 'animationDuration', 'animationTimingFunction'] }, truncate: { - values: ['true'], + values: ['boolean'], mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace'] }, font: { @@ -502,8 +502,8 @@ const propertyDescriptions: {[key: string]: string} = { 'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).', 'transitionShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', - 'truncateShortHand': 'Applying this shorthand will enable text truncation.', - 'fontShortHand': 'The fontSize provided defines the values this shorthand sets on the mapped values.', + 'truncateShortHand': 'Accepts a boolean value. Applying this shorthand will set the required style macro properties to enable text truncation.', + 'fontShortHand': 'Accepts the same values as fontSize. The fontSize provided defines the values this shorthand sets on the mapped values.', 'borderStartWidth': 'These values map to pixels.', 'borderEndWidth': 'These values map to pixels.', 'borderTopWidth': 'These values map to pixels.', From 0f6511eb735c9c11dea1d93d08d4ad4bb9f2d0fd Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 12:06:37 -0800 Subject: [PATCH 08/18] add descriptsions --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 46 ++++++++++++++++++- packages/dev/s2-docs/src/styleProperties.ts | 6 ++- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 066ca0ac0e5..883dd67a3ee 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -126,6 +126,36 @@ const styleMacroValueDesc: RecordResolves to 100%. + }, + 'screen': { + description: <>Resolves to 100vh for height or 100vw for width. + }, + 'emphasized': { + description: 'Shadow for emphasized states.' + }, + 'elevated': { + description: 'Shadow for elevated surfaces.' + }, + 'dragged': { + description: 'Shadow for elements being dragged.' + }, + 'square': { + description: <>1:1 aspect ratio. + }, + 'video': { + description: <>16:9 aspect ratio. + }, + 'colors': { + description: 'Transition property for color related properties: color, background-color, border-color, fill, and stroke.' + }, + 'opacity': { + description: 'Transition property for opacity.' + }, + 'shadow': { + description: 'Transition property for box-shadow.' } }; @@ -307,18 +337,32 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
      {values.map((value, i) => { let valueDesc = styleMacroValueDesc[value]; + + // special case for 'full' for border radius property + if (value === 'full' && propertyName.includes('Radius')) { + valueDesc = { + description: <>Resolves to 9999px for fully rounded corners. + }; + } + // special case handling for font and spacing specific value descriptions so they don't get rendered for // other properties that may include the same values (e.g. heading in Colors) let shouldShowDescription = false; if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { shouldShowDescription = true; - } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { + } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && (propertyName === 'lineHeight' || propertyName === 'fontWeight')) { shouldShowDescription = true; } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { shouldShowDescription = true; } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { shouldShowDescription = true; + } else if (valueDesc && !['ui', 'heading', 'title', 'body', 'detail', 'code', 'fontSize'].includes(value)) { + // Show description for all other values that have one + shouldShowDescription = true; } + // TODO need to hide screen description in background blend mode + // TODO make property -> value -> mdn mapping, mdnTypeLinks is too general, might be able to use mdnPropertyLinks + let content; if (links[value]) { diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index d9cd0e0b104..43555dc885c 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -469,7 +469,11 @@ export const spacingTypeValues = { const mdnTypeLinks: {[key: string]: string} = { 'string': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String', 'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number', - 'currentColor': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword' + 'currentColor': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword', + 'transparent': 'https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#transparent', + 'min': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-content', + 'max': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-content', + 'fit': 'https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content' }; // a mapping of value to links that should be replaced in place with the provided string From c494801b4e2652784eb673000c2cb95606037954 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 15:41:23 -0800 Subject: [PATCH 09/18] add more descriptions --- .../s2/style/spectrum-theme.ts | 20 +- packages/dev/s2-docs/src/styleProperties.ts | 450 +++++++++++++++++- 2 files changed, 448 insertions(+), 22 deletions(-) diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index db23b9c33f5..b66fa550564 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -687,15 +687,19 @@ export const style = createTheme({ containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width), containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height), minHeight: createSpectrumSizingProperty('minHeight', height), - maxHeight: createSpectrumSizingProperty('maxHeight', { - ...height, - none: 'none' - }), + maxHeight: createSpectrumSizingProperty('maxHeight', (() => { + // auto is not a valid value for maxHeight + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {auto, ...rest} = height; + return {...rest, none: 'none'}; + })()), minWidth: createSpectrumSizingProperty('minWidth', width), - maxWidth: createSpectrumSizingProperty('maxWidth', { - ...width, - none: 'none' - }), + maxWidth: createSpectrumSizingProperty('maxWidth', (() => { + // auto is not a valid value for maxWidth + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {auto, ...rest} = width; + return {...rest, none: 'none'}; + })()), borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth), borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth), borderTopWidth: borderWidth, diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 43555dc885c..4083d58029d 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -495,6 +495,422 @@ const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = { }, 'gridRowEnd': { 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end' + }, + 'marginStart': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#auto' + }, + 'marginEnd': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#auto' + }, + 'marginTop': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top#auto' + }, + 'marginBottom': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom#auto' + }, + 'insetStart': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#auto' + }, + 'insetEnd': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#auto' + }, + 'top': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/top#auto' + }, + 'left': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/left#auto' + }, + 'bottom': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/bottom#auto' + }, + 'right': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/right#auto' + }, + 'height': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/height#auto' + }, + 'width': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto' + }, + 'minHeight': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#auto' + }, + 'minWidth': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#auto' + }, + 'maxHeight': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#none' + }, + 'maxWidth': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none' + }, + 'flexBasis': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#auto' + }, + 'containIntrinsicWidth': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width#auto' + }, + 'containIntrinsicHeight': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height#auto' + }, + 'aspectRatio': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#auto' + }, + 'position': { + 'absolute': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute', + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed', + 'relative': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative', + 'sticky': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky', + 'static': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#static' + }, + 'caretColor': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color#auto', + 'transparent': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color#color_value' + }, + 'borderStyle': { + 'solid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#solid', + 'dashed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#dashed', + 'dotted': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#dotted', + 'double': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#double', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#hidden', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#none' + }, + 'outlineStyle': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#none', + 'solid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#solid', + 'dashed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#dashed', + 'dotted': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#dotted', + 'double': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#double', + 'inset': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#inset' + }, + 'transform': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform' + }, + 'boxDecorationBreak': { + 'slice': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#slice', + 'clone': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#clone' + }, + 'hyphens': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#none', + 'manual': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#manual', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#auto' + }, + 'lineClamp': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/line-clamp' + }, + 'listStyleType': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#none', + 'disc': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#disc', + 'decimal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#decimal' + }, + 'listStylePosition': { + 'inside': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#inside', + 'outside': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#outside' + }, + 'textTransform': { + 'uppercase': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#uppercase', + 'lowercase': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#lowercase', + 'capitalize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#capitalize', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#none' + }, + 'textAlign': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#start', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#center', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#end', + 'justify': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#justify' + }, + 'verticalAlign': { + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#baseline', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#top', + 'middle': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#middle', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#bottom', + 'text-top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#text-top', + 'text-bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#text-bottom', + 'sub': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#sub', + 'super': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#super' + }, + 'textDecoration': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#none', + 'underline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#underline', + 'overline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#overline', + 'line-through': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#line-through' + }, + 'textOverflow': { + 'ellipsis': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#ellipsis', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#clip' + }, + 'whiteSpace': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#normal', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#nowrap', + 'pre': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre', + 'pre-line': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre-line', + 'pre-wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre-wrap', + 'break-spaces': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#break-spaces' + }, + 'textWrap': { + 'wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#wrap', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#nowrap', + 'balance': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance', + 'pretty': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#pretty' + }, + 'wordBreak': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#normal', + 'break-all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-all', + 'keep-all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#keep-all', + 'break-word': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word' + }, + 'overflowWrap': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#normal', + 'anywhere': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#anywhere', + 'break-word': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#break-word' + }, + 'display': { + 'block': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#block', + 'inline-block': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-block', + 'inline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline', + 'flex': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#flex', + 'inline-flex': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-flex', + 'grid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#grid', + 'inline-grid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-grid', + 'contents': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents', + 'list-item': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#list-item', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#none' + }, + 'alignContent': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#normal', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#center', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#end', + 'space-between': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-between', + 'space-around': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-around', + 'space-evenly': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-evenly', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#baseline', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#stretch' + }, + 'alignItems': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#center', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#baseline', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#stretch' + }, + 'justifyContent': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#normal', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#center', + 'space-between': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-between', + 'space-around': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-around', + 'space-evenly': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-evenly', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#stretch' + }, + 'justifyItems': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#stretch' + }, + 'alignSelf': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#auto', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#stretch', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#baseline' + }, + 'justifySelf': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#auto', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#stretch' + }, + 'flexDirection': { + 'row': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#row', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#column', + 'row-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#row-reverse', + 'column-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#column-reverse' + }, + 'flexWrap': { + 'wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#wrap', + 'wrap-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#wrap-reverse', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#nowrap' + }, + 'gridAutoFlow': { + 'row': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#row', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#column', + 'dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#dense', + 'row dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#row_dense', + 'column dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#column_dense' + }, + 'gridAutoRows': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#max-content', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows' + }, + 'gridAutoColumns': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#max-content', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns' + }, + 'gridTemplateColumns': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#max-content', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#none', + 'subgrid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#subgrid', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns' + }, + 'gridTemplateRows': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#max-content', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#none', + 'subgrid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#subgrid', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows' + }, + 'gridTemplateAreas': { + 'string[]': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas' + }, + 'float': { + 'inline-start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#inline-start', + 'inline-end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#inline-end', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#right', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#left', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#none' + }, + 'clear': { + 'inline-start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#inline-start', + 'inline-end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#inline-end', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#right', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#both', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#none' + }, + 'overflowX': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#auto', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#hidden', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#clip', + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#visible', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#scroll' + }, + 'overflowY': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#auto', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#hidden', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#clip', + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#visible', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#scroll' + }, + 'overscrollBehaviorX': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#auto', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#contain', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#none' + }, + 'overscrollBehaviorY': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#auto', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#contain', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#none' + }, + 'boxSizing': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#border-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#content-box' + }, + 'tableLayout': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#auto', + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#fixed' + }, + 'order': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/order' + }, + 'pointerEvents': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#none', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#auto' + }, + 'userSelect': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#none', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#text', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#all', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#auto' + }, + 'visibility': { + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#visible', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#hidden', + 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#collapse' + }, + 'cursor': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#auto', + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#default', + 'pointer': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#pointer', + 'wait': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#wait', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#text', + 'move': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#move', + 'help': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#help', + 'not-allowed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#not-allowed', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#none' + }, + 'objectFit': { + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#contain', + 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#cover', + 'fill': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#fill', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#none', + 'scale-down': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#scale-down' + }, + 'zIndex': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/z-index' + }, + 'boxShadow': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#none' + }, + 'filter': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/filter#none' + }, + 'opacity': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/opacity' + }, + 'outlineOffset': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset' + }, + 'backgroundSize': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#auto', + 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#cover', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#contain' + }, + 'backgroundImage': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image' + }, + 'transitionDelay': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay' + }, + 'transitionDuration': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration' + }, + 'animation': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation' + }, + 'animationDuration': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration' + }, + 'animationDelay': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay' + }, + 'animationIterationCount': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count' + }, + 'rotate': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/rotate' + }, + 'scaleX': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scale' + }, + 'scaleY': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scale' } }; @@ -531,21 +947,27 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] for (let [name, values] of Object.entries(propertiesMapping)) { let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; + // check for property specific MDN links if (mdnPropertyLinks[name]) { - let [key, value] = Object.entries(mdnPropertyLinks[name])[0]; - links[key] = {href: value}; - values = [key]; - } else { - // see if the property has any common types that should link to MDN instead - for (let value of values) { - // make sure not to overwrite number in sizing properties and pill in other sections aka effects - if ((value === 'number' && sizingProperties.has(name)) || (value === 'pill' && propertyCategory !== 'dimensions')) { - continue; - } - - if (mdnTypeLinks[value]) { - links[value] = {href: mdnTypeLinks[value]}; - } + for (let [key, href] of Object.entries(mdnPropertyLinks[name])) { + links[key] = {href}; + } + } + + // see if the property has any common types that should link to MDN + for (let value of values) { + // skip if we already have a property specific link + if (links[value]) { + continue; + } + + // make sure not to overwrite number in sizing properties and pill in other sections aka effects + if ((value === 'number' && sizingProperties.has(name)) || (value === 'pill' && propertyCategory !== 'dimensions')) { + continue; + } + + if (mdnTypeLinks[value]) { + links[value] = {href: mdnTypeLinks[value]}; } } From 39adf21471534e4f93da8563065c135d4198ac77 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 16:27:44 -0800 Subject: [PATCH 10/18] more missing mdn links --- packages/dev/s2-docs/pages/s2/style-macro.mdx | 2 +- .../dev/s2-docs/src/StyleMacroProperties.tsx | 13 +- packages/dev/s2-docs/src/styleProperties.ts | 246 +++++++++++++++++- 3 files changed, 240 insertions(+), 21 deletions(-) diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx index 5b7990964d7..df2ab1e01f7 100644 --- a/packages/dev/s2-docs/pages/s2/style-macro.mdx +++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx @@ -54,4 +54,4 @@ Note that `font` should be applied on a per element basis rather than globally s ## Conditions - + diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 883dd67a3ee..8e39814574d 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -27,9 +27,6 @@ function NoneValueListItem() { 'none' -
      - {styleMacroValueDesc['none'].description} -
      ); } @@ -124,9 +121,6 @@ const styleMacroValueDesc: RecordA numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices. }, - 'none': { - description: 'No value applied.' - }, 'full': { description: <>Resolves to 100%. }, @@ -168,11 +162,12 @@ interface StyleMacroPropertyDefinition { } interface StyleMacroPropertiesProps { - properties: {[propertyName: string]: StyleMacroPropertyDefinition} + properties: {[propertyName: string]: StyleMacroPropertyDefinition}, + sort?: boolean } -export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { - let propertyNames = Object.keys(properties).sort(); +export function StyleMacroProperties({properties, sort = true}: StyleMacroPropertiesProps) { + let propertyNames = sort ? Object.keys(properties).sort() : Object.keys(properties); let propertyToShorthands = getPropertyToShorthandsMapping(); let shorthandDefs = getShorthandDefinitions(); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 4083d58029d..c68df219c52 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -839,17 +839,6 @@ const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = { 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#hidden', 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#collapse' }, - 'cursor': { - 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#auto', - 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#default', - 'pointer': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#pointer', - 'wait': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#wait', - 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#text', - 'move': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#move', - 'help': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#help', - 'not-allowed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#not-allowed', - 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#none' - }, 'objectFit': { 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#contain', 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#cover', @@ -911,6 +900,241 @@ const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = { }, 'scaleY': { 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scale' + }, + 'backgroundClip': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#border-box', + 'padding-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#padding-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#content-box', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#text' + }, + 'backgroundAttachment': { + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#fixed', + 'local': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#local', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#scroll' + }, + 'backgroundRepeat': { + 'repeat': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat', + 'no-repeat': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#no-repeat', + 'repeat-x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-x', + 'repeat-y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-y', + 'round': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#round', + 'space': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#space' + }, + 'backgroundOrigin': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#border-box', + 'padding-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#padding-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#content-box' + }, + 'backgroundPosition': { + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position' + }, + 'backgroundBlendMode': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#normal', + 'multiply': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#multiply', + 'screen': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#screen', + 'overlay': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#overlay', + 'darken': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#darken', + 'lighten': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#lighten', + 'color-dodge': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color-dodge', + 'color-burn': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color-burn', + 'hard-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#hard-light', + 'soft-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#soft-light', + 'difference': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#difference', + 'exclusion': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#exclusion', + 'hue': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#hue', + 'saturation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#saturation', + 'color': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color', + 'luminosity': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#luminosity' + }, + 'mixBlendMode': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#normal', + 'multiply': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#multiply', + 'screen': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#screen', + 'overlay': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#overlay', + 'darken': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#darken', + 'lighten': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#lighten', + 'color-dodge': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color-dodge', + 'color-burn': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color-burn', + 'hard-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#hard-light', + 'soft-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#soft-light', + 'difference': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#difference', + 'exclusion': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#exclusion', + 'hue': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#hue', + 'saturation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#saturation', + 'color': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color', + 'luminosity': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#luminosity', + 'plus-darker': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#plus-darker', + 'plus-lighter': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#plus-lighter' + }, + 'forcedColorAdjust': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#auto', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#none' + }, + 'colorScheme': { + 'light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#light', + 'dark': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#dark', + 'light dark': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme' + }, + 'transitionTimingFunction': { + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function', + 'linear': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#linear', + 'in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in', + 'out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out', + 'in-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out' + }, + 'animationDirection': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#normal', + 'reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#reverse', + 'alternate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#alternate', + 'alternate-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#alternate-reverse' + }, + 'animationFillMode': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#none', + 'forwards': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#forwards', + 'backwards': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#backwards', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#both' + }, + 'animationTimingFunction': { + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function', + 'linear': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#linear', + 'in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in', + 'out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out', + 'in-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out' + }, + 'animationPlayState': { + 'paused': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state#paused', + 'running': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state#running' + }, + 'contain': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#none', + 'strict': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#strict', + 'content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#content', + 'size': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#size', + 'inline-size': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#inline-size', + 'layout': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#layout', + 'style': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#style', + 'paint': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#paint' + }, + 'captionSide': { + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side#top', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side#bottom' + }, + 'borderCollapse': { + 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse#collapse', + 'separate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse#separate' + }, + 'breakBefore': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#avoid', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#all', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#avoid-page', + 'page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#page', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#right', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#column' + }, + 'breakInside': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid-page', + 'avoid-column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid-column' + }, + 'breakAfter': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#avoid', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#all', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#avoid-page', + 'page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#page', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#right', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#column' + }, + 'scrollBehavior': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#auto', + 'smooth': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#smooth' + }, + 'touchAction': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#auto', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#none', + 'pan-x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-x', + 'pan-y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-y', + 'manipulation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation', + 'pinch-zoom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pinch-zoom' + }, + 'isolation': { + 'isolate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/isolation#isolate', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/isolation#auto' + }, + 'transformOrigin': { + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'top right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin' + }, + 'resize': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#none', + 'vertical': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#vertical', + 'horizontal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#horizontal', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#both' + }, + 'scrollSnapType': { + 'x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#x', + 'y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#y', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#both', + 'x mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory', + 'y mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory', + 'both mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory' + }, + 'scrollSnapAlign': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#center', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#none' + }, + 'scrollSnapStop': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop#normal', + 'always': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop#always' + }, + 'appearance': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#none', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#auto' + }, + 'objectPosition': { + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position' + }, + 'willChange': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#auto', + 'scroll-position': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#scroll-position', + 'contents': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#contents', + 'transform': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change' + }, + 'unicodeBidi': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#normal', + 'embed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#embed', + 'bidi-override': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#bidi-override', + 'isolate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#isolate', + 'isolate-override': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#isolate-override', + 'plaintext': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#plaintext' } }; From 449cdc4f5ab02ddb2da65899d0a7efe2943aae70 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 11 Dec 2025 17:02:23 -0800 Subject: [PATCH 11/18] fix blend mode screen description and add cursor mdn --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 27 ++++++++++---- packages/dev/s2-docs/src/styleProperties.ts | 37 +++++++++++++++++++ 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 8e39814574d..e66fed87d52 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -142,14 +142,23 @@ const styleMacroValueDesc: Record16:9 aspect ratio. }, + 'default': { + description: 'Sets transition property to color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, and backdrop-filter.' + }, 'colors': { - description: 'Transition property for color related properties: color, background-color, border-color, fill, and stroke.' + description: 'Sets transition property to color, background-color, border-color, text-decoration-color, fill, and stroke.' }, 'opacity': { - description: 'Transition property for opacity.' + description: 'Sets transition property to opacity.' }, 'shadow': { - description: 'Transition property for box-shadow.' + description: 'Sets transition property to box-shadow.' + }, + 'transform': { + description: 'Sets transition property to transform, translate, scale, and rotate properties.' + }, + 'all': { + description: 'Sets transition to all animatable properties.' } }; @@ -351,14 +360,16 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper shouldShowDescription = true; } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { shouldShowDescription = true; - } else if (valueDesc && !['ui', 'heading', 'title', 'body', 'detail', 'code', 'fontSize'].includes(value)) { + } else if (['default', 'colors', 'opacity', 'shadow', 'transform', 'all'].includes(value) && propertyName === 'transition') { + // show description for transition-specific values only when rendering transition property so they don't leak + shouldShowDescription = true; + } else if (value === 'screen' && (propertyName === 'backgroundBlendMode' || propertyName === 'mixBlendMode')) { + // don't show dimension description for blend mode screen value + shouldShowDescription = false; + } else if (valueDesc && !['ui', 'heading', 'title', 'body', 'detail', 'code', 'fontSize', 'default', 'colors', 'opacity', 'shadow', 'transform', 'all'].includes(value)) { // Show description for all other values that have one shouldShowDescription = true; } - // TODO need to hide screen description in background blend mode - // TODO make property -> value -> mdn mapping, mdnTypeLinks is too general, might be able to use mdnPropertyLinks - - let content; if (links[value]) { content = ( diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index c68df219c52..a848f22422c 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -839,6 +839,43 @@ const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = { 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#hidden', 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#collapse' }, + 'cursor': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'pointer': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'wait': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'move': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'help': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'not-allowed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'context-menu': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'progress': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'cell': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'crosshair': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'vertical-text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'alias': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'copy': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'no-drop': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'grab': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'grabbing': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'all-scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'col-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'row-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'n-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'e-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 's-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'w-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ne-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nw-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'se-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ew-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ns-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nesw-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nwse-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'zoom-in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'zoom-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor' + }, 'objectFit': { 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#contain', 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#cover', From 69409c130c708ab02e1c9961216f58d416dcfa00 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 12 Dec 2025 14:44:03 -0800 Subject: [PATCH 12/18] fix missing flexShrink/etc properties and make number description only for sizing properties --- packages/dev/s2-docs/src/StyleMacroProperties.tsx | 11 +++++++++-- packages/dev/s2-docs/src/styleProperties.ts | 5 +++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index e66fed87d52..085e143937b 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -175,6 +175,8 @@ interface StyleMacroPropertiesProps { sort?: boolean } +let sizingProperties = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flexBasis', 'containIntrinsicWidth', 'containIntrinsicHeight']; + export function StyleMacroProperties({properties, sort = true}: StyleMacroPropertiesProps) { let propertyNames = sort ? Object.keys(properties).sort() : Object.keys(properties); let propertyToShorthands = getPropertyToShorthandsMapping(); @@ -366,6 +368,9 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper } else if (value === 'screen' && (propertyName === 'backgroundBlendMode' || propertyName === 'mixBlendMode')) { // don't show dimension description for blend mode screen value shouldShowDescription = false; + } else if (value === 'number') { + // only show number description for sizing properties (width, height, etc.) + shouldShowDescription = sizingProperties.includes(propertyName); } else if (valueDesc && !['ui', 'heading', 'title', 'body', 'detail', 'code', 'fontSize', 'default', 'colors', 'opacity', 'shadow', 'transform', 'all'].includes(value)) { // Show description for all other values that have one shouldShowDescription = true; @@ -408,17 +413,19 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { let typeDesc = styleMacroValueDesc[typeName]; + // make sure only to show "number" description for sizing properties + let shouldShowTypeDescription = typeName !== 'number' || sizingProperties.includes(propertyName); return (
    • {typeName} - {typeDesc?.description && ( + {shouldShowTypeDescription && typeDesc?.description && (
      {typeDesc.description}
      )} - {typeDesc?.body && ( + {shouldShowTypeDescription && typeDesc?.body && (
      {typeDesc.body}
      diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index a848f22422c..32271f61cf9 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -1215,6 +1215,11 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] } } + // if values array is empty but we have MDN links, add value (ensures flexShrink/etc get values) + if (values.length === 0 && Object.keys(links).length > 0) { + values = Object.keys(links); + } + // see if the property has any common types that should link to MDN for (let value of values) { // skip if we already have a property specific link From c18c9713e63384be39abb729d33ea4b4b3ef5626 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 12 Dec 2025 15:32:56 -0800 Subject: [PATCH 13/18] refactor so shorthands are top level --- .../dev/s2-docs/src/StyleMacroProperties.tsx | 56 +----- packages/dev/s2-docs/src/styleProperties.ts | 176 ++++++++++-------- 2 files changed, 108 insertions(+), 124 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 085e143937b..65f65c96e67 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -3,10 +3,10 @@ import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, SemanticColor import {styles as codeStyles} from './Code'; import {ColorLink} from './Link'; import {colorSwatch} from './color.macro' with {type: 'macro'}; -import {getPropertyToShorthandsMapping, getShorthandDefinitions, spacingTypeValues} from './styleProperties'; import {Punctuation} from './types'; import React, {ReactNode} from 'react'; import {S2Typography} from './S2Typography'; +import {spacingTypeValues} from './styleProperties'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}}); @@ -179,8 +179,6 @@ let sizingProperties = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', export function StyleMacroProperties({properties, sort = true}: StyleMacroPropertiesProps) { let propertyNames = sort ? Object.keys(properties).sort() : Object.keys(properties); - let propertyToShorthands = getPropertyToShorthandsMapping(); - let shorthandDefs = getShorthandDefinitions(); return ( @@ -188,7 +186,6 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper let propDef = properties[propertyName]; let values = propDef.values; let links = propDef.links || {}; - let associatedShorthands = propertyToShorthands[propertyName] || []; return ( @@ -204,6 +201,7 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper return (
      + {/* this is for shorthands */} {propDef.mapping && (

      Maps to

      @@ -215,6 +213,11 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper ))} + {/* {propDef.description && ( +
      + {propDef.description} +
      + )} */}
      )} {(() => { @@ -446,51 +449,6 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper
      ); })()} - {associatedShorthands.length > 0 && ( -
      -

      - Shorthands -

      - {associatedShorthands.map((shorthandName, idx) => { - let shorthandDef = shorthandDefs[shorthandName]; - return ( -
      - - {shorthandName} - - {shorthandDef.mapping && ( -
      - Maps to:{' '} - - {shorthandDef.mapping.map((prop, i) => ( - - {i > 0 && ', '} - {prop} - - ))} - -
      - )} - {shorthandDef.description && ( -
      - {shorthandName === 'font' && propertyName === 'color' ? ( - <> - Accepts the same values as{' '} - - fontSize - - . The fontSize provided defines the values this shorthand sets on the mapped values. - - ) : ( - shorthandDef.description - )} -
      - )} -
      - ); - })} -
      - )}       ); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 32271f61cf9..03db3cfc6de 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -259,162 +259,205 @@ const miscPropertyValues: {[key: string]: (string | number)[]} = { caretColor: ['auto', 'transparent'] }; -const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: string[]}} = { +const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: string[], category: string}} = { padding: { values: relativeSpacingValues, - mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] + mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'], + category: 'dimensions' }, paddingX: { values: relativeSpacingValues, - mapping: ['paddingStart', 'paddingEnd'] + mapping: ['paddingStart', 'paddingEnd'], + category: 'dimensions' }, paddingY: { values: relativeSpacingValues, - mapping: ['paddingTop', 'paddingBottom'] + mapping: ['paddingTop', 'paddingBottom'], + category: 'dimensions' }, margin: { values: ['auto'], - mapping: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'] + mapping: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'], + category: 'dimensions' }, marginX: { values: ['auto'], - mapping: ['marginStart', 'marginEnd'] + mapping: ['marginStart', 'marginEnd'], + category: 'dimensions' }, marginY: { values: ['auto'], - mapping: ['marginTop', 'marginBottom'] + mapping: ['marginTop', 'marginBottom'], + category: 'dimensions' }, scrollPadding: { values: [], - mapping: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'] + mapping: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'], + category: 'dimensions' }, scrollPaddingX: { values: [], - mapping: ['scrollPaddingStart', 'scrollPaddingEnd'] + mapping: ['scrollPaddingStart', 'scrollPaddingEnd'], + category: 'dimensions' }, scrollPaddingY: { values: [], - mapping: ['scrollPaddingTop', 'scrollPaddingBottom'] + mapping: ['scrollPaddingTop', 'scrollPaddingBottom'], + category: 'dimensions' }, scrollMargin: { values: [], - mapping: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'] + mapping: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'], + category: 'dimensions' }, scrollMarginX: { values: [], - mapping: ['scrollMarginStart', 'scrollMarginEnd'] + mapping: ['scrollMarginStart', 'scrollMarginEnd'], + category: 'dimensions' }, scrollMarginY: { values: [], - mapping: ['scrollMarginTop', 'scrollMarginBottom'] + mapping: ['scrollMarginTop', 'scrollMarginBottom'], + category: 'dimensions' }, borderWidth: { values: [0, 1, 2, 4], - mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'] + mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'], + category: 'dimensions' }, borderXWidth: { values: [0, 1, 2, 4], - mapping: ['borderStartWidth', 'borderEndWidth'] + mapping: ['borderStartWidth', 'borderEndWidth'], + category: 'dimensions' }, borderYWidth: { values: [0, 1, 2, 4], - mapping: ['borderTopWidth', 'borderBottomWidth'] + mapping: ['borderTopWidth', 'borderBottomWidth'], + category: 'dimensions' }, borderRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'] + mapping: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'], + category: 'effects' }, borderTopRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderTopEndRadius'] + mapping: ['borderTopStartRadius', 'borderTopEndRadius'], + category: 'effects' }, borderBottomRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderBottomStartRadius', 'borderBottomEndRadius'] + mapping: ['borderBottomStartRadius', 'borderBottomEndRadius'], + category: 'effects' }, borderStartRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderBottomStartRadius'] + mapping: ['borderTopStartRadius', 'borderBottomStartRadius'], + category: 'effects' }, borderEndRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopEndRadius', 'borderBottomEndRadius'] + mapping: ['borderTopEndRadius', 'borderBottomEndRadius'], + category: 'effects' }, translate: { values: ['full'], - mapping: ['translateX', 'translateY'] + mapping: ['translateX', 'translateY'], + category: 'dimensions' }, scale: { values: ['number', '${number}%'], - mapping: ['scaleX', 'scaleY'] + mapping: ['scaleX', 'scaleY'], + category: 'dimensions' }, inset: { values: ['auto', 'full'], - mapping: ['top', 'bottom', 'insetStart', 'insetEnd'] + mapping: ['top', 'bottom', 'insetStart', 'insetEnd'], + category: 'dimensions' }, insetX: { values: ['auto', 'full'], - mapping: ['insetStart', 'insetEnd'] + mapping: ['insetStart', 'insetEnd'], + category: 'dimensions' }, insetY: { values: ['auto', 'full'], - mapping: ['top', 'bottom'] + mapping: ['top', 'bottom'], + category: 'dimensions' }, placeItems: { values: ['start', 'end', 'center', 'stretch'], - mapping: ['alignItems', 'justifyItems'] + mapping: ['alignItems', 'justifyItems'], + category: 'layout' }, placeContent: { values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'stretch'], - mapping: ['alignContent', 'justifyContent'] + mapping: ['alignContent', 'justifyContent'], + category: 'layout' }, placeSelf: { values: ['auto', 'start', 'end', 'center', 'stretch'], - mapping: ['alignSelf', 'justifySelf'] + mapping: ['alignSelf', 'justifySelf'], + category: 'layout' }, gap: { values: relativeSpacingValues, - mapping: ['rowGap', 'columnGap'] + mapping: ['rowGap', 'columnGap'], + category: 'dimensions' }, size: { values: heightBaseValues, - mapping: ['width', 'height'] + mapping: ['width', 'height'], + category: 'dimensions' }, minSize: { values: heightBaseValues, - mapping: ['minWidth', 'minHeight'] + mapping: ['minWidth', 'minHeight'], + category: 'dimensions' }, maxSize: { values: [...heightBaseValues, 'none'], - mapping: ['maxWidth', 'maxHeight'] + mapping: ['maxWidth', 'maxHeight'], + category: 'dimensions' }, overflow: { values: ['auto', 'hidden', 'clip', 'visible', 'scroll'], - mapping: ['overflowX', 'overflowY'] + mapping: ['overflowX', 'overflowY'], + category: 'layout' }, overscrollBehavior: { values: ['auto', 'contain', 'none'], - mapping: ['overscrollBehaviorX', 'overscrollBehaviorY'] + mapping: ['overscrollBehaviorX', 'overscrollBehaviorY'], + category: 'layout' }, gridArea: { values: ['string'], - mapping: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'] + mapping: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'], + category: 'layout' }, + // TODO: make sure this is merged transition: { values: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'], - mapping: ['transition', 'transitionDuration', 'transitionTimingFunction'] + mapping: ['transition', 'transitionDuration', 'transitionTimingFunction'], + category: 'effects' }, + // TODO: make sure this is merged animation: { values: ['string'], - mapping: ['animation', 'animationDuration', 'animationTimingFunction'] + mapping: ['animation', 'animationDuration', 'animationTimingFunction'], + category: 'effects' }, truncate: { values: ['boolean'], - mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace'] + mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace'], + // this spans several categories, but text feels the most appropriate over layout + category: 'text' }, font: { values: [...fontSize], - mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color'] + mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color'], + // put this in text since that seemed to make the most sense, but note it includes color + category: 'text' } }; @@ -1244,47 +1287,30 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] description: propertyDescriptions[name] }; } - return result; -} - -export function getShorthandDefinitions(): {[key: string]: StyleMacroPropertyDefinition} { - let result: {[key: string]: StyleMacroPropertyDefinition} = {}; + // add relevant shorthands to the property category too for (let [shorthandName, shorthandDef] of Object.entries(shorthandMapping)) { - let values = shorthandDef.values; - let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; + if (shorthandDef.category === propertyCategory) { + let values = shorthandDef.values; + let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; - for (let value of values) { - if (value === 'pill' && shorthandName.includes('border')) { - continue; - } + for (let value of values) { + if (value === 'pill' && shorthandName.includes('border')) { + continue; + } - if (mdnTypeLinks[value]) { - links[value] = {href: mdnTypeLinks[value]}; + if (mdnTypeLinks[value]) { + links[value] = {href: mdnTypeLinks[value]}; + } } - } - result[shorthandName] = { - values, - additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]), - links: Object.keys(links).length > 0 ? links : undefined, - mapping: shorthandDef.mapping, - description: propertyDescriptions[`${shorthandName}ShortHand`] - }; - } - - return result; -} - -export function getPropertyToShorthandsMapping(): {[propertyName: string]: string[]} { - let result: {[propertyName: string]: string[]} = {}; - - for (let [shorthandName, shorthandDef] of Object.entries(shorthandMapping)) { - for (let propertyName of shorthandDef.mapping) { - if (!result[propertyName]) { - result[propertyName] = []; - } - result[propertyName].push(shorthandName); + result[shorthandName] = { + values, + additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]), + links: Object.keys(links).length > 0 ? links : undefined, + mapping: shorthandDef.mapping, + description: propertyDescriptions[`${shorthandName}ShortHand`] + }; } } From bb0d3ab75103fb83e9de814f07d5c4b8407afb64 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 12 Dec 2025 15:34:01 -0800 Subject: [PATCH 14/18] forgot to remove code --- packages/dev/s2-docs/src/StyleMacroProperties.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 65f65c96e67..75062f505bb 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -213,11 +213,6 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper ))} - {/* {propDef.description && ( -
      - {propDef.description} -
      - )} */}
    )} {(() => { From f92183bffb1b7de0e1937023f4f59661ea9d0bd5 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 12 Dec 2025 15:44:42 -0800 Subject: [PATCH 15/18] move to new section --- packages/dev/s2-docs/pages/s2/style-macro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx index df2ab1e01f7..0e23cc5968d 100644 --- a/packages/dev/s2-docs/pages/s2/style-macro.mdx +++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx @@ -4,7 +4,7 @@ import {StyleMacroProperties} from '../../src/StyleMacroProperties'; import {getPropertyDefinitions} from '../../src/styleProperties'; export default Layout; -export const section = 'Components'; +export const section = 'Reference'; export const tags = ['style', 'macro', 'spectrum', 'custom', 'values', 'reference']; export const description = 'Reference table for the style macro'; From 55c836a415026cd699cb6e4c12a4093b1317913f Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Mon, 15 Dec 2025 09:38:44 +1100 Subject: [PATCH 16/18] fix test-esm --- packages/dev/mcp/s2/scripts/build-data.mjs | 3 +-- packages/dev/s2-docs/package.json | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev/mcp/s2/scripts/build-data.mjs b/packages/dev/mcp/s2/scripts/build-data.mjs index bec0322c838..d0758e14ee2 100644 --- a/packages/dev/mcp/s2/scripts/build-data.mjs +++ b/packages/dev/mcp/s2/scripts/build-data.mjs @@ -77,7 +77,7 @@ function buildIllustrationNames() { } async function loadAliases(modPath, exportName) { - if (!fs.existsSync(modPath)) {return {};} + if (!fs.existsSync(modPath)) {return {};} const mod = await import(pathToFileURL(modPath).href); return mod[exportName] ?? {}; } @@ -201,7 +201,6 @@ async function main() { for (const category of propertyCategories) { Object.assign(styleProperties, stylePropsMod.getPropertyDefinitions(category)); } - Object.assign(styleProperties, stylePropsMod.getShorthandDefinitions()); writeJson(path.join(OUT_DIR, 'styleProperties.json'), styleProperties); const require = createRequire(import.meta.url); diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index 49a7619da5b..fb1386f9dff 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -2,6 +2,7 @@ "name": "@react-spectrum/s2-docs", "version": "1.0.0", "private": true, + "type": "module", "scripts": { "start": "parcel 'pages/**/*.mdx' --config .parcelrc-s2-docs", "start:s2": "DOCS_ENV=dev LIBRARY=s2 parcel 'pages/s2/**/*.mdx' -p 4321 --config .parcelrc-s2-docs --dist-dir dist/s2 --cache-dir ../../../.parcel-cache/s2", From 9d248c1e519d5d17a86e6f2cb78c6ce13517b8de Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Mon, 15 Dec 2025 09:53:23 +1100 Subject: [PATCH 17/18] undo type module --- packages/dev/s2-docs/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index fb1386f9dff..49a7619da5b 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -2,7 +2,6 @@ "name": "@react-spectrum/s2-docs", "version": "1.0.0", "private": true, - "type": "module", "scripts": { "start": "parcel 'pages/**/*.mdx' --config .parcelrc-s2-docs", "start:s2": "DOCS_ENV=dev LIBRARY=s2 parcel 'pages/s2/**/*.mdx' -p 4321 --config .parcelrc-s2-docs --dist-dir dist/s2 --cache-dir ../../../.parcel-cache/s2", From 9ba730755b5bf8074bd3e198d414a86195419371 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 15 Dec 2025 11:21:51 -0800 Subject: [PATCH 18/18] add missing base colors --- packages/dev/s2-docs/src/S2Colors.tsx | 78 ++++++++++++++++++- .../dev/s2-docs/src/StyleMacroProperties.tsx | 45 ++++++++--- packages/dev/s2-docs/src/styleProperties.ts | 24 +++--- 3 files changed, 124 insertions(+), 23 deletions(-) diff --git a/packages/dev/s2-docs/src/S2Colors.tsx b/packages/dev/s2-docs/src/S2Colors.tsx index 6a622d7b910..90ac1e09746 100644 --- a/packages/dev/s2-docs/src/S2Colors.tsx +++ b/packages/dev/s2-docs/src/S2Colors.tsx @@ -115,7 +115,7 @@ export function SemanticColorsDisclosure() { export function GlobalColorsDisclosure() { return ( - + Global colors

    The following values are available across all color properties.

    @@ -145,6 +145,82 @@ export function GlobalColorsDisclosure() { ); } +export function TransparentColorsDisclosure() { + return ( + + Transparent colors + +

    These colors are useful for overlays or transparent effects.

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +     +     + ); +} + +export function HCMColorsDisclosure() { + return ( + + High contrast mode colors + +

    These colors map to system colors when forced colors mode is active.

    +
      +
    • Background
      • +
    • ButtonBorder
      • +
    • ButtonFace
      • +
    • ButtonText
      • +
    • Field
      • +
    • Highlight
      • +
    • HighlightText
      • +
    • GrayText
      • +
    • Mark
      • +
    • LinkText
      • +
    +     +     + ); +} + function ColorScale({scale}) { return scale.map(([name, className]) => ( diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index 75062f505bb..72f0ea13967 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -1,5 +1,5 @@ import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2'; -import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors'; +import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, HCMColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure, TransparentColorsDisclosure} from './S2Colors'; import {styles as codeStyles} from './Code'; import {ColorLink} from './Link'; import {colorSwatch} from './color.macro' with {type: 'macro'}; @@ -91,6 +91,8 @@ const styleMacroValueDesc: Record + + ) }, @@ -216,21 +218,34 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper
    )} {(() => { - // for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values if (propertyName === 'color') { return ( - - - {styleMacroValueDesc['baseColors'].body} - +
    +

    Values

    +
    + + +
    + + + {styleMacroValueDesc['baseColors'].body} + +
    ); } if (propertyName === 'backgroundColor') { return ( - - - {styleMacroValueDesc['baseColors'].body} - +
    +

    Values

    +
    + + +
    + + + {styleMacroValueDesc['baseColors'].body} + +
    ); } @@ -245,6 +260,8 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper

    Values

    + +
    @@ -258,6 +275,8 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper

    Values

    + +
    @@ -274,6 +293,8 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper
    + + @@ -313,6 +334,10 @@ export function StyleMacroProperties({properties, sort = true}: StyleMacroProper +
    + + +
    ); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index 03db3cfc6de..4476e264003 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -58,7 +58,7 @@ const fontSize = [ ]; const colorPropertyValues: {[key: string]: string[]} = { - color: ['accent', 'neutral', 'neutral-subdued', 'negative', 'disabled', 'heading', 'title', 'body', 'detail', 'code', 'auto', 'baseColors'], + color: ['accent', 'neutral', 'neutral-subdued', 'negative', 'disabled', 'heading', 'title', 'body', 'detail', 'code', 'auto', 'black', 'white', 'baseColors'], backgroundColor: [ 'accent', 'accent-subtle', 'neutral', 'neutral-subdued', 'neutral-subtle', 'negative', 'negative-subtle', 'informative', 'informative-subtle', @@ -72,18 +72,18 @@ const colorPropertyValues: {[key: string]: string[]} = { 'magenta', 'magenta-subtle', 'pink', 'pink-subtle', 'turquoise', 'turquoise-subtle', 'cinnamon', 'cinnamon-subtle', 'brown', 'brown-subtle', 'silver', 'silver-subtle', - 'disabled', 'base', 'layer-1', 'layer-2', 'pasteboard', 'elevated', 'baseColors' + 'disabled', 'base', 'layer-1', 'layer-2', 'pasteboard', 'elevated', 'black', 'white', 'baseColors' ], - borderColor: ['negative', 'disabled', 'baseColors'], - outlineColor: ['focus-ring', 'baseColors'], + borderColor: ['negative', 'disabled', 'black', 'white', 'baseColors'], + outlineColor: ['focus-ring', 'black', 'white', 'baseColors'], fill: [ 'none', 'currentColor', 'accent', 'neutral', 'negative', 'informative', 'positive', 'notice', 'gray', 'red', 'orange', 'yellow', 'chartreuse', 'celery', 'green', 'seafoam', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta', - 'pink', 'turquoise', 'cinnamon', 'brown', 'silver', 'baseColors' + 'pink', 'turquoise', 'cinnamon', 'brown', 'silver', 'black', 'white', 'baseColors' ], - stroke: ['none', 'currentColor', 'baseColors'] + stroke: ['none', 'currentColor', 'black', 'white', 'baseColors'] }; const dimensionsPropertyValues: {[key: string]: (string | number)[]} = { @@ -1222,12 +1222,12 @@ const propertyDescriptions: {[key: string]: string} = { 'rotate': 'Accepts a number (treated as degrees) or a string with units (deg, rad, grad, turn).', 'scaleX': 'Accepts a number or percentage string.', 'scaleY': 'Accepts a number or percentage string.', - 'scaleShortHand': 'Accepts a number or percentage string.', + 'scaleShorthand': 'Accepts a number or percentage string.', 'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).', - 'transitionShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', - 'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', - 'truncateShortHand': 'Accepts a boolean value. Applying this shorthand will set the required style macro properties to enable text truncation.', - 'fontShortHand': 'Accepts the same values as fontSize. The fontSize provided defines the values this shorthand sets on the mapped values.', + 'transitionShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', + 'animationShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', + 'truncateShorthand': 'Accepts a boolean value. Applying this shorthand will set the required style macro properties to enable text truncation.', + 'fontShorthand': 'Accepts the same values as fontSize. The fontSize provided defines the values this shorthand sets on the mapped values.', 'borderStartWidth': 'These values map to pixels.', 'borderEndWidth': 'These values map to pixels.', 'borderTopWidth': 'These values map to pixels.', @@ -1309,7 +1309,7 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]), links: Object.keys(links).length > 0 ? links : undefined, mapping: shorthandDef.mapping, - description: propertyDescriptions[`${shorthandName}ShortHand`] + description: propertyDescriptions[`${shorthandName}Shorthand`] }; } }