feat: Primeng theme #1393

ashwin1111 · 2025-07-27T14:09:36Z

Description

Please add PR description here, add screenshots if needed

Clickup

https://app.clickup.com/

Summary by CodeRabbit

New Features
- Introduced comprehensive multi-brand theming with dynamic theme switching for Fyle and Co brands, including brand-specific color palettes, CSS variables, and design token presets.
- Added a live theme demo component to preview and switch themes in real time, showcasing updated button styles and color swatches.
- Integrated a centralized ThemeService for managing theme application and brand switching across the app.
Documentation
- Added detailed guides and migration plans covering CSS variable usage, design token mapping, theming architecture, and migration phases for PrimeNG integration.
Style
- Refactored and centralized button and icon styles using CSS custom properties, improving maintainability and consistency across themes.
- Modularized input, button, toggle, tooltip, radio button, dialog, checkbox, multiselect, dropdown, datepicker, chips, and table styles into separate SCSS files.
- Reorganized brand-specific icon overrides with explicit CSS layering for better cascade control.
Chores
- Updated dependencies to include theming-related packages for PrimeNG and utility support.
- Integrated ThemeService into app initialization for automatic theme setup.

coderabbitai · 2025-07-27T14:09:43Z

Walkthrough

This update introduces a comprehensive theming infrastructure supporting multi-brand (Fyle and Co) UI customization using CSS custom properties, TypeScript theme presets, and a centralized Angular ThemeService. It adds detailed documentation, new dependencies, CSS architecture improvements, brand-specific style modules, and a demo component to visualize and test dynamic theme switching across the application.

Changes

File(s) / Group	Change Summary
`CO_CSS_VARIABLES_USAGE.md`, `CSS_VARIABLES_USAGE.md`, `CURRENT_THEME_MECHANISM.md`, `DESIGN_TOKEN_MAPPING.md`, `PHASE_1_ANALYSIS.md`, `PHASE_1_COMPLETION_SUMMARY.md`, `PHASE_2_COMPLETION_SUMMARY.md`, `PRESET_INTEGRATION_SOLUTION.md`, `PRIMENG_THEMING_MIGRATION_PLAN.md`	Added extensive documentation covering CSS variable usage, theming mechanisms, migration plans, design token mapping, and project phase summaries.
`package.json`	Added dependencies: `@primeuix/styled`, `@primeuix/themes`, `@primeuix/utils`.
`src/app/app.module.ts`	Integrated `ThemeService` into the app module; updated `APP_INITIALIZER` for theme initialization.
`src/app/core/guard/qbo-token.guard.ts`	Modified `canActivate` method to always return `true`, bypassing previous validation logic.
`src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html`	Added `<app-theme-demo></app-theme-demo>` component at the top of the template.
`src/app/shared/components/theme-demo/theme-demo.component.ts`	Introduced `ThemeDemoComponent` for live theme switching, brand visualization, and CSS variable inspection.
`src/app/shared/shared.module.ts`	Declared and imported `ThemeDemoComponent` in `SharedModule`.
`src/assets/scss/buttons.scss`	New SCSS file defining button styles using CSS variables for all button variants and states.
`src/assets/scss/inputs.scss`	New SCSS file defining input styles using CSS variables for various input components and states.
`src/assets/scss/tooltips.scss`	Added tooltip styles using CSS variables for text and arrow positioning.
`src/assets/scss/toggles.scss`	Added toggle switch styles using CSS variables with theme-specific adjustments.
`src/assets/scss/radio-buttons.scss`	Added radio button styles using CSS variables for dimension, border, background, and icon styling.
`src/assets/scss/dialogs.scss`	Added dialog component styles using CSS variables for content, header, and close icon.
`src/assets/scss/checkboxes.scss`	Added checkbox styles using CSS variables for box, icon, hover, and highlight states.
`src/assets/scss/dropdowns.scss`	Added dropdown styles using CSS variables covering container, items, triggers, and states.
`src/assets/scss/multiselect.scss`	Added multiselect styles using CSS variables for container, trigger, panel, items, and states.
`src/assets/scss/datepicker.scss`	Added datepicker styles using CSS variables for layout, navigation, and states.
`src/assets/scss/chips.scss`	Added chips component styles using CSS variables for tokens and container.
`src/assets/scss/table.scss`	Added table styles using CSS variables for headers, body, rows, and status badges.
`src/assets/scss/skeleton.scss`	Added skeleton style using CSS variables.
`src/assets/scss/spinner.scss`	Added spinner styles and animations using CSS variables.
`src/assets/scss/toasts.scss`	Added toast notification styles using CSS variables.
`src/core/services/theme.service.ts`	Added `ThemeService` to manage brand switching, CSS variable application, and theme state.
`src/styles.scss`	Introduced CSS `@layer` ordering, grouped brand icon overrides, and imported button, input, tooltip, toggle, radio, dialog, checkbox, multiselect, dropdown, datepicker, chips, and table styles from new SCSS files; removed inline styles.
`src/themes/co-css-vars.ts`, `src/themes/fyle-css-vars.ts`	Added TypeScript modules exporting structured mappings of brand CSS variables.
`src/themes/co-preset.ts`, `src/themes/fyle-preset.ts`	Added theme preset objects for Co and Fyle brands, including color palettes and component style overrides.
`src/themes/index.ts`	Centralized exports and utilities for theme presets, CSS variable mappings, and brand utilities.
`src/themes/theme.types.ts`	Added TypeScript interfaces and types for theme configuration and color palettes.
`src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-custom-segment-dialog/netsuite-custom-segment-dialog.component.html`	Removed fixed width and height inline styles from dialog component.
`src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.html`	Removed padding utility classes from input element.
`src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.scss`	Added padding utilities to `.error-box` style.
`src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.html`	Simplified input padding classes by removing explicit padding overrides.
`src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.scss`	Added padding utilities to `.error-box` and `.normal-box` styles.
`src/app/shared/components/export-log/export-log-table/export-log-table.component.scss`	Removed hover styling from `.clickable-row:hover`.
`src/app/shared/components/qbd/mapping/qbd-mapping-table/qbd-mapping-table.component.scss`	Removed styles for `th` and `td` elements.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ThemeDemoComponent
    participant ThemeService
    participant Document

    User->>ThemeDemoComponent: Clicks "Switch Theme" or brand button
    ThemeDemoComponent->>ThemeService: switchToBrand(brandId)
    ThemeService->>Document: Set data-theme attribute
    ThemeService->>Document: Apply CSS variables for selected brand
    ThemeDemoComponent->>ThemeService: getCurrentBrand(), getCurrentBrandPreset()
    ThemeService-->>ThemeDemoComponent: Return current brand info
    ThemeDemoComponent->>Document: Render UI with updated styles

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Poem

A rabbit hopped through fields of hue,
With buttons pink and buttons blue.
It switched the theme from Fyle to Co,
And watched the colors change and glow.
With docs and code both neat and clean,
This bunny’s proud—our app’s pristine!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch prime-ng-theme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 6

🔭 Outside diff range comments (2)

src/app/core/guard/qbo-token.guard.ts (1)

31-59: Unreachable security code due to early return.

This entire security validation block is now unreachable due to the early return on line 29. This includes important checks for workspace ID, token health, and error handling with proper user redirects.
src/assets/scss/buttons.scss (1)
1-126: Excellent centralization of button styles with some architectural concerns.

The consolidation of button styles into a dedicated SCSS file using CSS custom properties is a solid architectural decision that supports the dynamic theming system. However, there are some areas for improvement:

Excessive !important usage: Nearly every property uses !important, which could make future customization and debugging more difficult.

Missing fallback values: CSS variables lack fallback values, which could lead to styling issues if variables aren't properly set.

Inconsistent !important application: Some properties like .btn-text-primary cursor and font-size don't use !important while others do.

Consider these improvements:
.p-button {
-  color: var(--preset-btn-primary-color) !important;
+  color: var(--preset-btn-primary-color, #ffffff) !important;
-  background: var(--preset-btn-primary-background) !important;
+  background: var(--preset-btn-primary-background, #007ad9) !important;
}

.btn-text-primary {
-  cursor: var(--preset-btn-text-cursor);
+  cursor: var(--preset-btn-text-cursor) !important;
-  font-size: var(--preset-btn-text-font-size);
+  font-size: var(--preset-btn-text-font-size) !important;
}
The CSS variable naming convention is excellent and the organization by button variants makes the code maintainable.

🧹 Nitpick comments (14)

src/themes/theme.types.ts (1)
1-6: Well-structured brand theme configuration interface.

The BrandThemeConfig interface provides good type safety with constrained brandId values. The preset property uses any type which reduces type safety.

Consider improving the preset type if PrimeNG provides specific preset types:
-  preset: any; // PrimeNG preset type
+  preset: PrimeNGPreset; // Import specific type if available
src/themes/co-css-vars.ts (1)
1-306: Excellent CSS variables mapping structure with room for type safety improvements.

The comprehensive organization by category (backgrounds, text, borders, buttons, etc.) makes this very maintainable. The inline comments with actual color values are helpful for developers.

Consider adding TypeScript type definitions to ensure type safety:
// Add at the top of the file
interface CSSVarsStructure {
  backgrounds: Record<string, string>;
  text: Record<string, string>;
  borders: Record<string, string>;
  buttons: Record<string, string>;
  spacing: Record<string | number, string>;
  // ... other categories
}

export const CoCSSVars: CSSVarsStructure = {
  // existing implementation
};
This would provide compile-time checking and better IntelliSense support.
src/themes/fyle-css-vars.ts (1)
1-228: Good brand-specific CSS variables structure, but consider consistency improvements.

The Fyle-specific implementation follows the same organizational pattern as the Co version, which is excellent for maintainability.

Consider these improvements for better consistency:

Ensure category order matches between brands:
// Both files should follow the same category order:
// backgrounds, text, borders, buttons, gradients (if applicable), spacing, borderRadius, etc.
Add the same TypeScript typing as suggested for CoCSSVars for consistency and type safety.

Document brand-specific categories: The gradients category exists in Fyle but not Co - consider adding a comment explaining this is Fyle-specific, or add an empty gradients object to Co for consistency.
src/app/app.module.ts (1)
94-106: Clear initialization logic with potential for improvement.

The explicit branding initialization followed by implicit theme service initialization is well-documented. However, consider making the theme service initialization more explicit for better maintainability.

Consider this more explicit approach:
useFactory: (brandingService: BrandingService, themeService: ThemeService) => {
  return async () => {
    // Initialize branding first
    await brandingService.init();
    
    // Then explicitly initialize theme service
    await themeService.init();
  };
},
This makes the initialization flow more obvious and allows for proper error handling if either service fails to initialize.
CSS_VARIABLES_USAGE.md (1)
21-21: Fix markdown heading formatting.

The static analysis correctly identifies trailing punctuation in headings which should be removed for consistency.
-### **1. Import the Organized CSS Variables**
+### **1. Import the Organized CSS Variables**
Apply similar fixes to other headings flagged by markdownlint (lines 21, 43, 77, 85).
CO_CSS_VARIABLES_USAGE.md (1)
9-17: Add language specification to fenced code block.

The static analysis correctly identifies that the file structure code block should specify a language for proper syntax highlighting.
-```
+```
src/themes/
├── fyle-css-vars.ts    ← Fyle brand CSS variables
├── co-css-vars.ts      ← 🆕 Co brand CSS variables  
├── fyle-preset.ts      ← Uses FyleCSSVars
├── co-preset.ts        ← ✅ Updated to use CoCSSVars
├── theme.types.ts      ← Type definitions
└── index.ts            ← ✅ Exports both CSS variable systems
+```text
</blockquote></details>
<details>
<summary>src/themes/fyle-preset.ts (1)</summary><blockquote>

`152-164`: **Consider standardizing text button hover states.**

The text button configuration only defines `primary` and `primaryHover` states but lacks disabled and other variants that might be needed for consistency with other button types.



Consider adding a disabled state for completeness:

```diff
  text: {
    primary: {
      color: FyleCSSVars.buttons.tertiaryTextColor,
      fontSize: '14px',
      cursor: 'pointer'
    },
    primaryHover: {
      color: FyleCSSVars.buttons.tertiaryHoverTextColor,
      background: FyleCSSVars.buttons.tertiaryHoverBg,
      borderRadius: FyleCSSVars.borderRadius['2xs']
-   }
+   },
+   disabled: {
+     color: FyleCSSVars.text.disable,
+     cursor: 'not-allowed'
+   }
  }
src/themes/index.ts (1)
49-52: Consider adding error handling for invalid brand IDs.

While TypeScript provides type safety, runtime validation could prevent potential issues if the function is called with invalid data.

Add runtime validation for robustness:
  export function getBrandColors(brandId: SupportedBrand) {
+   if (brandId !== 'fyle' && brandId !== 'co') {
+     console.warn(`Invalid brand ID: ${brandId}, falling back to 'fyle'`);
+     brandId = 'fyle';
+   }
    const preset = getPresetByBrand(brandId);
    return preset.colors;
  }
src/styles.scss (1)
34-127: Good consolidation but inconsistent selector strategy.

The consolidation of brand-specific icon overrides into a dedicated CSS layer is excellent for organization. However, there's an inconsistency in selector approaches that could lead to confusion:

Some icons use [data-theme='fyle'] and [data-theme='co'] (modern approach)

Others use .fyle and .co class suffixes (legacy approach)

This mixed approach could make maintenance more difficult.

Consider standardizing on the [data-theme] approach for consistency:
-.pi-times.fyle.qbd{
+[data-theme='fyle'] .pi-times.qbd {
    content: url('./assets/icons/cross.svg') !important;
}

-.pi-times.fyle {
+[data-theme='fyle'] .pi-times {
    content: url('./assets/icons/cross-medium.svg') !important;
}

-.pi-times.co {
+[data-theme='co'] .pi-times {
    content: url('./assets/icons/co/grv-close-medium.svg') !important;
}
This would create a more consistent and maintainable theming approach.
src/app/shared/components/theme-demo/theme-demo.component.ts (2)
80-84: Toast buttons lack functionality.

The toast notification buttons are present but have no click handlers or functionality implemented.

Consider adding toast functionality to complete the demo:
-<button class="p-button">Show Success Toast</button>
-<button class="p-button">Show Error Toast</button>
+<button class="p-button" (click)="showSuccessToast()">Show Success Toast</button>
+<button class="p-button" (click)="showErrorToast()">Show Error Toast</button>
Add corresponding methods in the component class to demonstrate themed toast notifications.

112-247: Comprehensive inline styling with good organization.

The inline styles are well-organized and create a clean, functional demo interface. While inline styles work well for a demo component, consider the maintainability implications for larger components.

For better maintainability, consider moving these styles to a separate SCSS file:
@Component({
  selector: 'app-theme-demo',
  templateUrl: './theme-demo.component.html',
  styleUrls: ['./theme-demo.component.scss']
})
This would improve code organization and make the styles easier to maintain.
CURRENT_THEME_MECHANISM.md (1)
14-18: Inconsistent variable naming for the Co brand configuration

featureConfigs maps the brand key co to c1FeatureConfig.
Everywhere else in the docs the Co brand is referred to as co, not c1.
This minor typo will confuse readers and, if copied verbatim, break the example code.
-    co: c1FeatureConfig
+    co: coFeatureConfig
PRIMENG_THEMING_MIGRATION_PLAN.md (1)

167-179: Phase numbering skips “Phase 6”

The document jumps from Phase 5 to Phase 7.
Either rename Phase 7 to Phase 6 or add the missing phase to keep the plan coherent.

PHASE_1_ANALYSIS.md (1)

21-35: Markdown headings flagged by MD026

Several headings end with a colon (:), triggering markdownlint rule MD026.
Drop the trailing punctuation to silence the linter and keep heading style consistent.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 955a1cb and c2d426d.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (24)

CO_CSS_VARIABLES_USAGE.md (1 hunks)
CSS_VARIABLES_USAGE.md (1 hunks)
CURRENT_THEME_MECHANISM.md (1 hunks)
DESIGN_TOKEN_MAPPING.md (1 hunks)
PHASE_1_ANALYSIS.md (1 hunks)
PHASE_1_COMPLETION_SUMMARY.md (1 hunks)
PHASE_2_COMPLETION_SUMMARY.md (1 hunks)
PRESET_INTEGRATION_SOLUTION.md (1 hunks)
PRIMENG_THEMING_MIGRATION_PLAN.md (1 hunks)
package.json (1 hunks)
src/app/app.module.ts (4 hunks)
src/app/core/guard/qbo-token.guard.ts (1 hunks)
src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html (1 hunks)
src/app/shared/components/theme-demo/theme-demo.component.ts (1 hunks)
src/app/shared/shared.module.ts (2 hunks)
src/assets/scss/buttons.scss (1 hunks)
src/core/services/theme.service.ts (1 hunks)
src/styles.scss (2 hunks)
src/themes/co-css-vars.ts (1 hunks)
src/themes/co-preset.ts (1 hunks)
src/themes/fyle-css-vars.ts (1 hunks)
src/themes/fyle-preset.ts (1 hunks)
src/themes/index.ts (1 hunks)
src/themes/theme.types.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: ashwin1111
PR: fylein/fyle-integrations-app#343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the suggestion to replace the hardcoded reference to 'Sage Intacct' with a dynamic reference to the target system using the variable `targetSystemName` in the subLabel string within the `business-central-export-settings.component.html` file.

Learnt from: ashwin1111
PR: fylein/fyle-integrations-app#343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the suggestion to replace the hardcoded reference to 'Sage Intacct' with a dynamic reference to the target system using the variable `targetSystemName` in the subLabel string within the `business-central-export-settings.component.html` file.

PRESET_INTEGRATION_SOLUTION.md (2)

Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the suggestion to replace the hardcoded reference to 'Sage Intacct' with a dynamic reference to the target system using the variable targetSystemName in the subLabel string within the business-central-export-settings.component.html file.

Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the suggestion to replace the hardcoded reference to 'Sage Intacct' with a dynamic reference to the target system using the variable targetSystemName in the subLabel string within the business-central-export-settings.component.html file.

🧬 Code Graph Analysis (4)

src/app/shared/components/theme-demo/theme-demo.component.ts (1)

src/themes/theme.types.ts (1)

SupportedBrand (8-8)

src/themes/co-preset.ts (3)

src/themes/theme.types.ts (1)

ThemeColors (10-30)

src/themes/index.ts (2)

CoPreset (3-3)

CoCSSVars (7-7)

src/themes/co-css-vars.ts (1)

CoCSSVars (11-306)

src/themes/fyle-preset.ts (3)

src/themes/theme.types.ts (1)

ThemeColors (10-30)

src/themes/index.ts (2)

FylePreset (2-2)

FyleCSSVars (6-6)

src/themes/fyle-css-vars.ts (1)

FyleCSSVars (11-226)

src/themes/index.ts (6)

src/themes/theme.types.ts (1)

SupportedBrand (8-8)

src/themes/fyle-preset.ts (1)

FylePreset (41-173)

src/themes/co-preset.ts (1)

CoPreset (41-173)

src/core/services/theme.service.ts (1)

getBrandColors (128-130)

src/themes/fyle-css-vars.ts (1)

FyleCSSVars (11-226)

src/themes/co-css-vars.ts (1)

CoCSSVars (11-306)

🪛 markdownlint-cli2 (0.17.2)

CSS_VARIABLES_USAGE.md

21-21: Trailing punctuation in heading
Punctuation: ':'