Skip to content

Conversation

logonoff
Copy link
Member

@logonoff logonoff commented Oct 1, 2025

Closes #11803

Enhanced the @patternfly/react-tokens package to include dark theme values in semantic token definitions, making it easier for developers to access both light and dark theme values programmatically.

Changes:

  • Added getDarkThemeDeclarations() to extract dark theme CSS rules
  • Added getDarkLocalVarsMap() to build dark theme variable mappings
  • Updated token generation to include darkValue and darkValues properties
  • Enhanced variable resolution to support dark theme context
  • Updated legacy token support to include dark values

Result:

  • 1,998 tokens now include dark theme values
  • Tokens with dark overrides expose darkValue property
  • Backward compatible with existing code
  • Enables programmatic theme switching and consistency

Implements: #11803

🤖 Generated with Claude Code

Closes patternfly#11803

Enhanced the @patternfly/react-tokens package to include dark theme
values in semantic token definitions, making it easier for developers
to access both light and dark theme values programmatically.

Changes:
- Added getDarkThemeDeclarations() to extract dark theme CSS rules
- Added getDarkLocalVarsMap() to build dark theme variable mappings
- Updated token generation to include darkValue and darkValues properties
- Enhanced variable resolution to support dark theme context
- Updated legacy token support to include dark values

Result:
- 1,998 tokens now include dark theme values
- Tokens with dark overrides expose darkValue property
- Backward compatible with existing code
- Enables programmatic theme switching and consistency

Implements: patternfly#11803

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@rebeccaalpert
Copy link
Member

Seeing some build errors here:

Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(164,3): error TS2322: Type '{ style: { data: { fill: "var(--pf-v6-chart-area--data--Fill, --pf-t--chart--global--fill--color--900)"; fillOpacity: 0.3; strokeWidth: "--pf-t--chart--global--stroke--width--sm"; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--layout--height"; width: "--pf-...' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; } & VictoryCommonThemeProps & VictoryDatableProps'.
  Type '{ style: { data: { fill: "var(--pf-v6-chart-area--data--Fill, --pf-t--chart--global--fill--color--900)"; fillOpacity: 0.3; strokeWidth: "--pf-t--chart--global--stroke--width--sm"; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--layout--height"; width: "--pf-...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(177,3): error TS2322: Type '{ style: { axis: { fill: "var(--pf-v6-chart-axis--axis--Fill, transparent)"; strokeWidth: "--pf-t--chart--global--stroke--width--xs"; stroke: "var(--pf-v6-chart-axis--axis--stroke--Color, --pf-t--chart--global--fill--color--300)"; strokeLinecap: "--pf-t--chart--global--stroke-line-cap"; strokeLinejoin: "--pf-t--char...' is not assignable to type '{ style?: { axis?: VictoryStyleObject; axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; grid?: VictoryStyleObject; ticks?: VictoryTickStyleObject; tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; offsetX?: number; offsetY?: number; } & VictoryCommonThemeProps'.
  Type '{ style: { axis: { fill: "var(--pf-v6-chart-axis--axis--Fill, transparent)"; strokeWidth: "--pf-t--chart--global--stroke--width--xs"; stroke: "var(--pf-v6-chart-axis--axis--stroke--Color, --pf-t--chart--global--fill--color--300)"; strokeLinecap: "--pf-t--chart--global--stroke-line-cap"; strokeLinejoin: "--pf-t--char...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(226,3): error TS2322: Type '{ style: { max: { padding: 8; stroke: "var(--pf-v6-chart-boxplot--max--stroke--Color, --pf-t--chart--global--fill--color--900)"; strokeWidth: "--pf-t--chart--global--stroke--width--xs"; }; ... 8 more ...; q3Labels: { ...; }; }; boxWidth: 20; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--...' is not assignable to type '{ style?: { max?: VictoryStyleObject; maxLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; median?: VictoryStyleObject; ... 6 more ...; q3Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; boxWidth?: number; } & VictoryCommonThemeProps'.
  Type '{ style: { max: { padding: 8; stroke: "var(--pf-v6-chart-boxplot--max--stroke--Color, --pf-t--chart--global--fill--color--900)"; strokeWidth: "--pf-t--chart--global--stroke--width--xs"; }; ... 8 more ...; q3Labels: { ...; }; }; boxWidth: 20; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(260,3): error TS2322: Type '{ candleColors: { positive: "var(--pf-v6-chart-candelstick--candle--positive--Color, --pf-t--chart--global--fill--color--white)"; negative: "var(--pf-v6-chart-candelstick--candle--negative--Color, --pf-t--chart--global--fill--color--900)"; }; style: { ...; }; padding: "--pf-t--chart--global--layout--padding"; height...' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; candleColors?: { ...; }; } & VictoryCommonThemeProps'.
  Type '{ candleColors: { positive: "var(--pf-v6-chart-candelstick--candle--positive--Color, --pf-t--chart--global--fill--color--white)"; negative: "var(--pf-v6-chart-candelstick--candle--negative--Color, --pf-t--chart--global--fill--color--900)"; }; style: { ...; }; padding: "--pf-t--chart--global--layout--padding"; height...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(274,3): error TS2322: Type '{ padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--layout--height"; width: "--pf-t--chart--global--layout--width"; }' is not assignable to type 'VictoryCommonThemeProps'.
  Types of property 'height' are incompatible.
    Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(279,5): error TS2322: Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(290,3): error TS2322: Type '{ padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--layout--height"; width: "--pf-t--chart--global--layout--width"; }' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; } & VictoryCommonThemeProps'.
  Type '{ padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--layout--height"; width: "--pf-t--chart--global--layout--width"; }' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(309,3): error TS2322: Type '{ style: { data: { fill: "var(--pf-v6-chart-line--data--Fill, transparent)"; opacity: 1; stroke: "var(--pf-v6-chart-line--data--stroke--Color, --pf-t--chart--global--fill--color--900)"; strokeWidth: "--pf-t--chart--global--stroke--width--sm"; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding";...' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; } & VictoryCommonThemeProps & VictoryDatableProps'.
  Type '{ style: { data: { fill: "var(--pf-v6-chart-line--data--Fill, transparent)"; opacity: 1; stroke: "var(--pf-v6-chart-line--data--stroke--Color, --pf-t--chart--global--fill--color--900)"; strokeWidth: "--pf-t--chart--global--stroke--width--sm"; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding";...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(337,3): error TS2322: Type '{ style: { data: { fill: "var(--pf-v6-chart-scatter--data--Fill, --pf-t--chart--global--fill--color--900)"; opacity: 1; stroke: "var(--pf-v6-chart-scatter--data--stroke--Color, transparent)"; strokeWidth: 0; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--la...' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; }; } & VictoryCommonThemeProps & VictoryDatableProps'.
  Type '{ style: { data: { fill: "var(--pf-v6-chart-scatter--data--Fill, --pf-t--chart--global--fill--color--900)"; opacity: 1; stroke: "var(--pf-v6-chart-scatter--data--stroke--Color, transparent)"; strokeWidth: 0; }; labels: { ...; }; }; padding: "--pf-t--chart--global--layout--padding"; height: "--pf-t--chart--global--la...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts(374,3): error TS2322: Type '{ style: { data: { fill: "var(--pf-v6-chart-voronoi--data--Fill, transparent)"; stroke: "var(--pf-v6-chart-voronoi--data--stroke--Color, transparent)"; strokeWidth: 0; }; labels: { fill: "var(--pf-v6-chart-voronoi--labels--Fill, --pf-t--chart--global--fill--color--200)"; ... 6 more ...; stroke: "var(--pf-v6-chart-gl...' is not assignable to type '{ style?: { data?: VictoryStyleObject; labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[]; flyout?: VictoryStyleObject; }; } & VictoryCommonThemeProps & VictoryDatableProps'.
  Type '{ style: { data: { fill: "var(--pf-v6-chart-voronoi--data--Fill, transparent)"; stroke: "var(--pf-v6-chart-voronoi--data--stroke--Color, transparent)"; strokeWidth: 0; }; labels: { fill: "var(--pf-v6-chart-voronoi--labels--Fill, --pf-t--chart--global--fill--color--200)"; ... 6 more ...; stroke: "var(--pf-v6-chart-gl...' is not assignable to type 'VictoryCommonThemeProps'.
    Types of property 'height' are incompatible.
      Type 'string' is not assignable to type 'number'.
Error: packages/react-charts/src/victory/components/ChartUtils/chart-label.ts(105,34): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
Error: packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts(149,8): error TS2365: Operator '>' cannot be applied to types 'string | number' and 'number'.
Error: packages/react-charts/src/victory/components/ChartBullet/ChartBulletTitle.tsx(207,41): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

react-tokens - include dark theme value in semantic token definitions
2 participants