✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

• [feat] Add headingFontSize1-6 and headingFontWeight1-6 CSS Custom Properties #13268 👈 (View in Graphite)
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

✅ PR preview is ready!

Summary

This PR adds 12 individual heading font properties to the StreamlitTheme interface in the component-v2-lib package:

• headingFontSize1 through headingFontSize6 (string values)
• headingFontWeight1 through headingFontWeight6 (number values)

These new properties provide direct access to specific heading levels (1-6) as an alternative to accessing them through array indices (headingFontSizes[0], etc.). The properties are derived from the same source as the existing array properties, with both forms maintained for backward compatibility and developer convenience.

Files Changed:

1. frontend/component-v2-lib/src/theme.ts - Added 12 new properties to the StreamlitTheme interface
2. frontend/lib/src/components/widgets/BidiComponent/utils/theme.ts - Implementation to extract the new properties from the EmotionTheme
3. frontend/lib/src/components/widgets/BidiComponent/utils/theme.test.ts - Tests for the new properties

Code Quality

Excellent. The implementation is clean, consistent with existing patterns, and follows TypeScript best practices.

Positive Aspects:

• The new properties follow the existing naming convention (camelCase with numeric suffixes)
• Good inline documentation in theme.ts (lines 55-58) explaining the relationship between array and individual properties
• The implementation in extractComponentsV2Theme is straightforward and maps directly from the same source as the array properties
• The CSS custom property conversion will produce correctly formatted kebab-case names (e.g., --st-heading-font-size-1)

Code Review:

  headingFontSize1: string
  headingFontSize2: string
  headingFontSize3: string
  headingFontSize4: string
  headingFontSize5: string
  headingFontSize6: string
  headingFontWeights: number[]
  headingFontWeight1: number
  headingFontWeight2: number
  headingFontWeight3: number
  headingFontWeight4: number
  headingFontWeight5: number

The interface additions are well-structured and the types are correct (string for sizes, number for weights).

    headingFontSize1: theme.fontSizes.h1FontSize,
    headingFontSize2: theme.fontSizes.h2FontSize,
    headingFontSize3: theme.fontSizes.h3FontSize,
    headingFontSize4: theme.fontSizes.h4FontSize,
    headingFontSize5: theme.fontSizes.h5FontSize,
    headingFontSize6: theme.fontSizes.h6FontSize,
    // ... weights follow same pattern

The extraction logic correctly maps from the EmotionTheme's fontSizes and fontWeights objects, ensuring consistency with the array properties.

Test Coverage

Good. The tests adequately cover the new functionality and follow best practices.

Tests Added:

• Parameterized test using it.each for all 12 new properties (lines 138-165 in theme.test.ts)
• The createTheme helper function is updated to include all new properties
• Tests verify correct CSS custom property naming and value conversion

    it.each<
      [
        key: keyof StreamlitTheme,
        value: string | number,
        expectedKey: keyof StreamlitThemeCssProperties,
      ]
    >([
      ["headingFontSize1", "2.75rem", "--st-heading-font-size-1"],
      // ... all 12 properties tested
    ])(
      "converts individual heading property %s to CSS custom property",
      (propName, value, expectedKey) => {
        const overrides: Partial<StreamlitTheme> = { [propName]: value }
        const result = objectToCssCustomProperties(createTheme(overrides))

        expect(result[expectedKey]).toBe(String(value))
      }
    )

The test follows TypeScript testing best practices by:

• Using it.each for parameterized testing
• Using proper type annotations for the test cases
• Testing the CSS custom property key transformation

Test Coverage Assessment:

• ✅ CSS custom property conversion tested for all 12 properties
• ✅ Type safety verified via StreamlitThemeCssProperties type
• ✅ Value conversion (number to string) verified

Minor Note: There's no explicit test verifying that headingFontSize1 equals headingFontSizes[0], but this is acceptable since the implementation is straightforward and both map from the same source values.

Backwards Compatibility

Fully backward compatible. This is a purely additive change:

• ✅ The existing array properties (headingFontSizes and headingFontWeights) are preserved and unchanged
• ✅ No modifications to existing API signatures
• ✅ Custom components using the existing API will continue to work without modification
• ✅ The new individual properties are optional for consumers—they can continue using array indices if preferred

Security & Risk

No security concerns or regression risks identified.

• The change only adds read-only theme properties
• No external API surface changes (no new HTTP endpoints, no data handling changes)
• The properties are derived from existing trusted theme values
• No new dependencies introduced

Recommendations

No blocking issues found. The PR is well-implemented and ready for merge.

Optional suggestions for future consideration:

1. Consider adding TSDoc comments to the individual heading properties in the StreamlitTheme interface to provide IDE intellisense for component authors. Example:

   /** Font size for h1 headings. Equivalent to `headingFontSizes[0]`. */
   headingFontSize1: string

2. The component-v2-lib README could be expanded in the future to document all available theme properties, but this is not a blocking concern for this PR.

Verdict

APPROVED: Clean, well-tested, backward-compatible addition of convenience properties for accessing individual heading font sizes and weights in the Components v2 theme API.

This is an automated AI review. Please verify the feedback and use your judgment.