Backend Theme Properties (Shadows, Spacing, BorderRadius) Not Reflecting in Frontend UI

[zesu22]

Description

Summary

Valid backend theme properties—specifically shadows, spacing, and borderRadius—are not being applied to the frontend UI. Instead, the application continuously falls back to the default values defined in the JS SDK's createTheme.ts file.

Root Cause Analysis

1. Missing Types: The FlowMetaTheme interface within flow-meta.ts (JS SDK) lacks the definitions for these backend theme configuration properties.
2. Incomplete Mapping: The buildThemeConfigFromFlowMeta utility does not pass the entire flowMetaTheme object forward; it only extracts and maps a subset of properties, completely omitting the newly supported backend configurations.

Steps to Reproduce

1. Create a theme in the backend, which will specifically add spacing, shadows & borderRadius.
2. Give them some values, I will attach my themes yaml file as well.
3. Now ran your application, you will observe that the spacing, shadows & borderRadius css variable are not inline with the themes which you have provided in the backend.

Variable names are:

• --thunder-border-radius-small, --thunder-border-radius-medium & --thunder-border-radius-large
• --thunder-shadow-small, --thunder-shadow-medium & --thunder-shadow-large
• --thunder-spacing-unit

File being used for theme

id: decl-theme-1
displayName: Declarative Test Theme
description: A declarative test theme
theme:
  defaultColorScheme: light
  direction: ltr
  borderRadius:
    small: "4px"
    medium: "8px"
    large: "12px"
  spacing:
    unit: 6
  shadows:
    small: "0px 1px 3px rgba(0, 0, 0, 0.2)"
    medium: "0px 4px 6px rgba(0, 0, 0, 0.3)"
    large: "0px 10px 20px rgba(0, 0, 0, 0.4)"

Version

0.4.0

Environment Details (with versions)

No response

[zesu22]

@ThaminduDilshan I have added a PR for this issue, can you please review that?

thunder-id/javascript-sdks#30