inject app theme into plugin instead of styles

[imolorhe]

Accessing stylesheet in a cross origin context fails with an error

Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

The only reason we did this was to get the current theme of the app from the styles. However we can achieve the same thing if we pass the theme to the plugin for the plugin to create the styles itself/

Fixes

Checks

• Ran yarn test-build
• Updated relevant documentations
• Updated matching config options in altair-static

Changes proposed in this pull request:

Summary by Sourcery

Enhancements:

• Refactor theme handling by injecting the app theme directly into the plugin, allowing the plugin to generate its own styles.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR changes how themes are handled in plugins by directly injecting theme configuration instead of relying on CSS stylesheet access. The implementation moves CSS variable generation to a dedicated module and modifies the plugin system to receive theme information directly rather than attempting to read styles from the parent application.

Sequence diagram for Theme Injection into Plugin

sequenceDiagram
    actor User
    participant PluginContextService
    participant PluginParentEngine
    participant AltairV3Panel
    User->>PluginContextService: Request Plugin
    PluginContextService->>PluginParentEngine: Create PluginParentEngine with theme
    PluginParentEngine->>AltairV3Panel: Pass theme and styles
    AltairV3Panel->>AltairV3Panel: Inject CSS based on theme
    AltairV3Panel-->>User: Rendered Plugin with Theme

Loading

File-Level Changes

Change	Details	Files
Refactored theme CSS generation into a separate module	Created new css.ts module to handle CSS variable string generation Moved CSS variable generation logic from ThemeDirective to the new module Added theme CSS generation function export to the theme index	packages/altair-core/src/theme/css.ts packages/altair-core/src/theme/index.ts
Modified plugin system to use theme configuration directly	Added theme option to PluginParentEngine constructor Updated plugin context to pass theme configuration to plugins Added fallback to use theme config when style access fails Modified panel implementation to handle theme-based CSS injection	packages/altair-core/src/plugin/v3/parent-engine.ts packages/altair-core/src/plugin/v3/panel.ts packages/altair-app/src/app/modules/altair/services/plugin/context/plugin-context.service.ts
Simplified theme directive implementation	Removed direct CSS generation code Removed ThemeRegistry dependency Updated theme application logic to use new CSS generation module	packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.ts packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.spec.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @imolorhe - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (complexity): Consider refactoring CSS variable generation into structured mapping objects with type-safe accessors

The CSS variable generation can be simplified while maintaining explicit mapping. Here's how:

const COLOR_VARS = {
  // Base colors
  'black-color': (t) => t.colors.black,
  'dark-grey-color': (t) => t.colors.darkGray,
  // ... other colors
} as const;

const RGB_VARS = {
  'rgb-black': (t) => hexToRgbStr(t.colors.black),
  'rgb-dark-grey': (t) => hexToRgbStr(t.colors.darkGray),
  // ... other rgb values
} as const;

const asCSSVariablesString = (theme: ITheme) => {
  const createVars = (mapping: Record<string, (t: ITheme) => string>) => 
    Object.entries(mapping)
      .map(([key, getValue]) => `--${key}: ${getValue(theme)};`)
      .join('\n    ');

  return `
  :root {
    ${createVars(COLOR_VARS)}
    ${createVars(RGB_VARS)}
    // Other variable groups...
  }`;
};

This approach:

• Groups related variables into mapping objects
• Maintains explicit relationships between theme properties and CSS variables
• Reduces repetition and chance of errors
• Makes adding new variables easier
• Keeps type safety with const assertions

[github-actions]

Visit the preview URL for this PR (updated for commit 4acb2bb):

https://altair-gql--pr2703-imolorhe-inject-them-qs6s29ru.web.app

_{(expires Sat, 16 Nov 2024 03:59:04 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 02d6323d75a99e532a38922862e269d63351a6cf}