Color palettes#1697
Conversation
…lternative colors and update them across the project
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughConsolidates frontend color usage to palette-based CSS variables: expands palette definitions, updates theme update calls, and replaces hardcoded/semantic color tokens across many component styles and templates with generated palette variables from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR expands the frontend theme color system by adding additional semantic palettes (warning/info/success/alternative + dark variants) and updating component styles to reference the generated palette CSS variables instead of hardcoded hex colors.
Changes:
- Extend
colorConfigpalettes insrc/main.tswith new semantic palettes and dark variants. - Refactor multiple component stylesheets to use
--color-*-Palette-*CSS variables and derived background variables fromcustom-theme.scss. - Update theming guidance in
frontend/CLAUDE.mdto enforce palette-based color usage.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/main.ts | Adds semantic palettes and dark variants to the NgxTheme color configuration. |
| frontend/src/custom-theme.scss | Reworks semantic background color variables to be derived from generated palette CSS variables. |
| frontend/src/app/services/connections.service.ts | Expands palette typing and injects additional palette values into theme updates. |
| frontend/src/app/components/users/users.component.css | Replaces alternative color usage with generated palette variables. |
| frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.css | Updates icon-box colors to use palette variables (incl. some dark-mode adjustments). |
| frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css | Replaces warning styles with palette variables. |
| frontend/src/app/components/ui-components/user-password/user-password.component.css | Switches success/error colors to palette variables. |
| frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css | Switches boolean icon colors to palette variables. |
| frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css | Switches boolean icon colors to palette variables. |
| frontend/src/app/components/ui-components/banner/banner.component.css | Moves banner semantic colors to palette variables. |
| frontend/src/app/components/ui-components/alert/alert.component.css | Moves alert semantic colors to palette variables. |
| frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css | Removes a block of dialog-specific styles. |
| frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html | Improves Material form-field labeling (uses mat-label). |
| frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css | Aligns dialog styling with palette variables and updated neutral borders. |
| frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css | Replaces info styles with palette variables and adjusts dark-mode text color. |
| frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts | Replaces some trigger colors with palette CSS variables. |
| frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css | Large styling updates to rely on palette variables and adjust light/dark states. |
| frontend/src/app/components/company/company.component.css | Replaces accessed/not-accessed status colors with palette variables. |
| frontend/CLAUDE.md | Documents the new “palette-only colors” rule and enumerates available palettes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .trigger-pill { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 7px; | ||
| gap: 8px; | ||
| padding: 7px 14px; | ||
| border-radius: 8px; | ||
| border: 1px solid #2a2a3a; | ||
| border-radius: 4px; | ||
| border: 1px solid var(--mat-button-outlined-outline-color); | ||
| background: #0f0f18; |
There was a problem hiding this comment.
.trigger-pill sets a dark background (#0f0f18) and uses border: 1px solid var(--mat-button-outlined-outline-color) without a fallback. In light mode the pill will likely stay dark, and if --mat-button-outlined-outline-color isn’t defined in this scope the entire border declaration becomes invalid. Consider adding light-mode overrides for the base pill background/border, and add a fallback value for the CSS variable (or define a component-scoped variable).
| /* Light mode overrides */ | ||
| @media (prefers-color-scheme: light) { | ||
| .trigger-pill { | ||
| background: #ffffff; | ||
| border-color: #e2e8f0; | ||
| } | ||
|
|
||
| .trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 35%); } | ||
| .trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 35%); } | ||
| .trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 35%); } | ||
| .trigger-pill--custom { color: #9878bf; } | ||
|
|
||
| .trigger-pill--add-row.trigger-pill--active { color: var(--success-color); } | ||
| .trigger-pill--update-row.trigger-pill--active { color: var(--info-color); } | ||
| .trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); } | ||
| .trigger-pill--custom.trigger-pill--active { color: #9333ea; } | ||
| /* Default colored text & icons per type (muted when not selected) */ | ||
| .trigger-pill--add-row { color: var(--color-successPalette-300); background-color: transparent; } | ||
| .trigger-pill--update-row { color: var(--color-infoPalette-300); background-color: transparent; } | ||
| .trigger-pill--delete-row { color: var(--color-warnPalette-300); background-color: transparent; } | ||
| .trigger-pill--custom { color: var(--color-alternativePalette-300); background-color: transparent; } | ||
|
|
||
| .trigger-pill:hover { | ||
| border-color: #cbd5e1; | ||
| background: #f8fafc; | ||
| background: rgba(255, 255, 255, 0.036); | ||
| } |
There was a problem hiding this comment.
The @media (prefers-color-scheme: light) block overrides only the per-type colors and active states, but doesn’t override the base .trigger-pill background/border/hover styles. This leaves light mode inheriting the dark-mode pill styling (and hover uses a white overlay), which is likely unintended given the rest of the file has explicit light-mode styles. Add light-mode overrides for .trigger-pill (and its :hover) to match the light theme.
| --alert-theme-color: var(--color-successPalette-500); | ||
| --bg-color: var(--success-background-color); | ||
| } | ||
|
|
There was a problem hiding this comment.
--alert-theme-color is now always sourced from the light palettes (e.g. --color-successPalette-500, --color-warnPalette-500). Previously, dark mode used different foreground colors (e.g. a brighter success red/green) via --*-color variables. This change likely reduces contrast in dark mode and makes the border/icon color inconsistent with the dark-mode background vars. Consider adding dark-mode overrides to use --color-*-DarkPalette-500 (where available) or reintroduce root-level --error-color/--success-color/... variables that switch per color scheme.
| @media (prefers-color-scheme: dark) { | |
| .banner_error { | |
| --alert-theme-color: var(--color-warnDarkPalette-500); | |
| } | |
| .banner_warning { | |
| --alert-theme-color: var(--color-warningDarkPalette-500); | |
| } | |
| .banner_info { | |
| --alert-theme-color: var(--color-infoDarkPalette-500); | |
| } | |
| .banner_success { | |
| --alert-theme-color: var(--color-successDarkPalette-500); | |
| } | |
| } |
| --alert-theme-color: var(--color-successPalette-500); | ||
| --bg-color: var(--success-background-color); | ||
| } | ||
|
|
There was a problem hiding this comment.
Same issue as banner.component.css: --alert-theme-color always uses the light palettes, but custom-theme.scss still switches some backgrounds to dark variants (e.g. --error-background-color uses warnDarkPalette in dark mode). Consider adding dark-mode overrides for --alert-theme-color to use the corresponding dark palette (e.g. --color-warnDarkPalette-500, --color-successDarkPalette-500) so foreground and background remain consistent and readable.
| @media (prefers-color-scheme: dark) { | |
| .alert_error { | |
| --alert-theme-color: var(--color-warnDarkPalette-500); | |
| } | |
| .alert_warning { | |
| --alert-theme-color: var(--color-warningDarkPalette-500); | |
| } | |
| .alert_info { | |
| --alert-theme-color: var(--color-infoDarkPalette-500); | |
| } | |
| .alert_success { | |
| --alert-theme-color: var(--color-successDarkPalette-500); | |
| } | |
| } |
| } | ||
| .boolean-icon-false { | ||
| color: var(--color-warnPalette-500); | ||
| } |
There was a problem hiding this comment.
This change removes the dark-mode specific colors for boolean icons. Since the app defines successDarkPalette/warnDarkPalette (and uses them elsewhere for dark mode), consider restoring a dark-scheme override so boolean-icon-true/false use the dark variants in prefers-color-scheme: dark to avoid low-contrast icons on dark backgrounds.
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .boolean-icon-true { | |
| color: var(--color-successDarkPalette-500); | |
| } | |
| .boolean-icon-false { | |
| color: var(--color-warnDarkPalette-500); | |
| } | |
| } |
| } | ||
| .boolean-icon-false { | ||
| color: var(--color-warnPalette-500); | ||
| } |
There was a problem hiding this comment.
This change removes the dark-mode specific colors for boolean icons. Since successDarkPalette/warnDarkPalette exist, consider adding a prefers-color-scheme: dark override so these icons use the dark variants for better contrast in dark mode.
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .boolean-icon-true { | |
| color: var(--color-successDarkPalette-500); | |
| } | |
| .boolean-icon-false { | |
| color: var(--color-warnDarkPalette-500); | |
| } | |
| } |
| } | ||
| color: var(--color-warnPalette-500); | ||
| } | ||
|
|
There was a problem hiding this comment.
company-member-cell_accessed / _not-accessed now always use the light palette colors. Previously, dark mode used brighter variants. Given successDarkPalette/warnDarkPalette exist, consider adding a prefers-color-scheme: dark override (or using theme-level semantic vars) so these status colors remain readable in dark mode.
| @media (prefers-color-scheme: dark) { | |
| .company-member-cell_accessed { | |
| color: var(--color-successDarkPalette-500); | |
| } | |
| .company-member-cell_not-accessed { | |
| color: var(--color-warnDarkPalette-500); | |
| } | |
| } |
| .success { | ||
| color: #43a047; | ||
| color: var(--color-successPalette-500); | ||
| } |
There was a problem hiding this comment.
.success now uses --color-successPalette-500 in all color schemes. In dark mode this is likely lower-contrast than the intended successDarkPalette variant (which exists in src/main.ts). Consider adding a dark-scheme override to use --color-successDarkPalette-500 (and similarly warnDarkPalette if needed).
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .error { | |
| color: var(--color-warnDarkPalette-500); | |
| } | |
| .success { | |
| color: var(--color-successDarkPalette-500); | |
| } | |
| } |
| primaryPalette?: string; | ||
| accentedPalette?: string; | ||
| warnPalette?: string; | ||
| whitePalette?: string; | ||
| warnDarkPalette?: string; | ||
| warningPalette?: string; | ||
| infoPalette?: string; | ||
| successPalette?: string; | ||
| alternativePalette?: string; | ||
| successDarkPalette?: string; | ||
| alternativeDarkPalette?: string; |
There was a problem hiding this comment.
Palettes is duplicated from src/main.ts but made fully optional here. That weakens type-safety around theming (e.g., allows calling updateColors with missing palettes without compiler errors) and can drift from the canonical palette list. Consider defining the palette type once (shared type) and keeping keys required; use Partial<Palettes> only at the call site if updateColors supports partial updates.
| primaryPalette?: string; | |
| accentedPalette?: string; | |
| warnPalette?: string; | |
| whitePalette?: string; | |
| warnDarkPalette?: string; | |
| warningPalette?: string; | |
| infoPalette?: string; | |
| successPalette?: string; | |
| alternativePalette?: string; | |
| successDarkPalette?: string; | |
| alternativeDarkPalette?: string; | |
| primaryPalette: string; | |
| accentedPalette: string; | |
| warnPalette: string; | |
| whitePalette: string; | |
| warnDarkPalette: string; | |
| warningPalette: string; | |
| infoPalette: string; | |
| successPalette: string; | |
| alternativePalette: string; | |
| successDarkPalette: string; | |
| alternativeDarkPalette: string; |
| this._themeService.updateColors({ | ||
| palettes: { | ||
| primaryPalette: res.connectionProperties.primary_color, | ||
| accentedPalette: res.connectionProperties.secondary_color, | ||
| warningPalette: '#f79008', | ||
| infoPalette: '#296ee9', | ||
| successPalette: '#1b5e20', | ||
| alternativePalette: '#6d28d9', | ||
| successDarkPalette: '#4caf50', | ||
| alternativeDarkPalette: '#c084fc', | ||
| }, |
There was a problem hiding this comment.
The same palette hex values (#f79008, #296ee9, #1b5e20, etc.) are repeated across multiple updateColors calls. This duplicates the canonical values already defined in src/main.ts and makes future palette changes error-prone. Consider centralizing these defaults (e.g., reuse the injected COLOR_CONFIG palettes or define a single constant) and spreading them into each updateColors call.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css (1)
1-11: Consider extracting shared boolean icon styles.This file is identical to
record-view-fields/boolean/boolean.component.css. If both components will always share the same boolean icon styling, consider extracting these styles to a shared stylesheet or CSS custom properties at a higher level to reduce duplication.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css` around lines 1 - 11, Duplicate boolean icon styles exist in boolean.component.css and record-view-fields/boolean/boolean.component.css; extract the shared rules (.boolean-icon, .boolean-icon-true, .boolean-icon-false) into a single shared stylesheet or higher-level/global CSS (e.g., shared-boolean-icons.css or global styles) and have both components import or reference that file instead of keeping copies; then remove the duplicated rules from the component-specific CSS files so both components use the centralized definitions.frontend/CLAUDE.md (1)
304-310: Good documentation addition for the color palette system.The Color Usage Rule clearly establishes the standard for palette-based theming. This will help maintain consistency as the codebase evolves.
One minor note: Line 309's "Simple colors:
myColorName" is a bit vague. Consider providing a concrete example or clarifying when simple color names (vs. palette variants like-500) should be used.📝 Suggested clarification
- `successDarkPalette`, `alternativeDarkPalette` -- Simple colors: `myColorName` +- Simple colors can be referenced directly by name when defined in `colorConfig` (e.g., `--color-myColorName`)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/CLAUDE.md` around lines 304 - 310, Replace the vague "Simple colors: `myColorName`" line in the Color Usage Rule with a concrete example and a one-sentence guidance: reference the `colorConfig` entry in `src/main.ts` to show a real simple-token example (e.g., a named token like myColorName) and state that simple names should be used only for single-tone tokens defined in `colorConfig`, whereas palette variants (the -500/-700 style shades) must be used for palette entries such as `primaryPalette`, `accentedPalette`, `warnPalette`, etc.; mention `myColorName` and `colorConfig` to help readers locate the source of truth.frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts (1)
123-128: Finish palette migration for the custom trigger color.Lines 124–126 were migrated, but Line 127 still uses a hardcoded hex (
#9c27b0). Consider switching it to a palette token for consistency and centralized theming.♻️ Suggested patch
public triggerMeta: Record<string, { icon: string; desc: string; color: string }> = { [EventType.AddRow]: { icon: 'add_circle_outline', desc: 'Fires when a new row is inserted', color: 'var(--color-successPalette-500)' }, [EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: 'var(--color-infoPalette-500)' }, [EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: 'var(--color-warnPalette-500)' }, - [EventType.Custom]: { icon: 'tune', desc: 'Manual trigger with custom button', color: '#9c27b0' }, + [EventType.Custom]: { icon: 'tune', desc: 'Manual trigger with custom button', color: 'var(--color-alternativePalette-500)' }, };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts` around lines 123 - 128, The custom trigger color in the triggerMeta map is hardcoded (`#9c27b0`); update the EventType.Custom entry in the triggerMeta object so its color uses a CSS palette token (e.g., change color to 'var(--color-primaryPalette-500)' or another existing token consistent with success/info/warn usage) and ensure the chosen CSS variable exists in the theme; locate the triggerMeta constant in db-table-actions.component (the triggerMeta object and EventType.Custom key) and replace the hex literal with the palette token.frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css (1)
443-457: Complete thebadge--whentokenization.Line 445 now follows
alternativePalette, but the light/dark backgrounds are still fixed purples. That leaves this badge pair out of sync the next time the alternative palette changes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css` around lines 443 - 457, Replace the hardcoded purple background colors for the .example-flow__badge--when rule with the matching alternativePalette CSS variables so the badge follows the token set: in the normal rule swap background: `#ede9fe` for the light alternative palette token (e.g. var(--color-alternativePalette-100)) and in the `@media` (prefers-color-scheme: dark) block swap background: `#3730a3` for the dark alternative palette token (e.g. var(--color-alternativePalette-600/700)), keeping the existing color: var(--color-alternativePalette-500) line unchanged; update .example-flow__badge--when in both places so it uses the palette variables instead of hex values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css`:
- Around line 506-530: In the dark-mode override, replace the light palette CSS
variables used in .example-trigger__icon-box--add, --update, --delete, and
--custom with their dark-palette counterparts so the icons use the intended
dark-theme colors; update the background and color references in the `@media`
(prefers-color-scheme: dark) block to use --color-successDarkPalette-500 for
.example-trigger__icon-box--add, --color-infoDarkPalette-500 for
.example-trigger__icon-box--update (if defined), --color-warnDarkPalette-500 for
.example-trigger__icon-box--delete, and --color-alternativeDarkPalette-500 for
.example-trigger__icon-box--custom, keeping the same color-mix transparency
values.
- Around line 1035-1041: Add a stylelint disable comment immediately before the
Angular-specific selectors to suppress the selector-pseudo-element-no-unknown
rule: insert /* stylelint-disable-next-line selector-pseudo-element-no-unknown
*/ just above the rules that target .affects-row ::ng-deep
.mat-button-toggle-checked and .action-methods ::ng-deep
.mat-button-toggle-checked in db-table-actions.component.css so the ::ng-deep
pseudo-element is allowed without moving the styles to a global stylesheet.
In `@frontend/src/app/services/connections.service.ts`:
- Around line 21-33: The Palettes type in connections.service.ts is declared
with all optional fields which conflicts with the required-field Palettes used
in main.ts and allows accidental omission of critical color properties; change
the Palettes type in connections.service.ts to make all fields required to match
the definition in main.ts (ensure fields: primaryPalette, accentedPalette,
warnPalette, whitePalette, warnDarkPalette, warningPalette, infoPalette,
successPalette, alternativePalette, successDarkPalette, alternativeDarkPalette
are non-optional) and update callers (notably updateColors()) to pass or merge
all required properties (or explicitly document/implement a merge pattern that
fills missing fields from colorConfig initialized in main.ts) so warnPalette,
warnDarkPalette and whitePalette are always present where used.
---
Nitpick comments:
In `@frontend/CLAUDE.md`:
- Around line 304-310: Replace the vague "Simple colors: `myColorName`" line in
the Color Usage Rule with a concrete example and a one-sentence guidance:
reference the `colorConfig` entry in `src/main.ts` to show a real simple-token
example (e.g., a named token like myColorName) and state that simple names
should be used only for single-tone tokens defined in `colorConfig`, whereas
palette variants (the -500/-700 style shades) must be used for palette entries
such as `primaryPalette`, `accentedPalette`, `warnPalette`, etc.; mention
`myColorName` and `colorConfig` to help readers locate the source of truth.
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css`:
- Around line 443-457: Replace the hardcoded purple background colors for the
.example-flow__badge--when rule with the matching alternativePalette CSS
variables so the badge follows the token set: in the normal rule swap
background: `#ede9fe` for the light alternative palette token (e.g.
var(--color-alternativePalette-100)) and in the `@media` (prefers-color-scheme:
dark) block swap background: `#3730a3` for the dark alternative palette token
(e.g. var(--color-alternativePalette-600/700)), keeping the existing color:
var(--color-alternativePalette-500) line unchanged; update
.example-flow__badge--when in both places so it uses the palette variables
instead of hex values.
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts`:
- Around line 123-128: The custom trigger color in the triggerMeta map is
hardcoded (`#9c27b0`); update the EventType.Custom entry in the triggerMeta object
so its color uses a CSS palette token (e.g., change color to
'var(--color-primaryPalette-500)' or another existing token consistent with
success/info/warn usage) and ensure the chosen CSS variable exists in the theme;
locate the triggerMeta constant in db-table-actions.component (the triggerMeta
object and EventType.Custom key) and replace the hex literal with the palette
token.
In
`@frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css`:
- Around line 1-11: Duplicate boolean icon styles exist in boolean.component.css
and record-view-fields/boolean/boolean.component.css; extract the shared rules
(.boolean-icon, .boolean-icon-true, .boolean-icon-false) into a single shared
stylesheet or higher-level/global CSS (e.g., shared-boolean-icons.css or global
styles) and have both components import or reference that file instead of
keeping copies; then remove the duplicated rules from the component-specific CSS
files so both components use the centralized definitions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 47f8b3e7-402d-4dae-aba6-92d836278a2f
📒 Files selected for processing (19)
frontend/CLAUDE.mdfrontend/src/app/components/company/company.component.cssfrontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.cssfrontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.tsfrontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.cssfrontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.cssfrontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.htmlfrontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.cssfrontend/src/app/components/ui-components/alert/alert.component.cssfrontend/src/app/components/ui-components/banner/banner.component.cssfrontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.cssfrontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.cssfrontend/src/app/components/ui-components/user-password/user-password.component.cssfrontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.cssfrontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.cssfrontend/src/app/components/users/users.component.cssfrontend/src/app/services/connections.service.tsfrontend/src/custom-theme.scssfrontend/src/main.ts
💤 Files with no reviewable changes (1)
- frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
| .example-trigger__icon-box--add { | ||
| background: color-mix(in srgb, var(--success-color), transparent 80%); | ||
| color: var(--success-color); | ||
| background: color-mix(in srgb, var(--color-successPalette-500), transparent 80%); | ||
| color: var(--color-successPalette-500); | ||
| } | ||
|
|
||
| .example-trigger__icon-box--update { | ||
| background: color-mix(in srgb, var(--info-color), transparent 80%); | ||
| color: var(--info-color); | ||
| background: color-mix(in srgb, var(--color-infoPalette-500), transparent 80%); | ||
| color: var(--color-infoPalette-500); | ||
| } | ||
|
|
||
| .example-trigger__icon-box--delete { | ||
| background: color-mix(in srgb, var(--error-color), transparent 80%); | ||
| color: var(--error-color); | ||
| background: color-mix(in srgb, var(--color-warnPalette-500), transparent 80%); | ||
| color: var(--color-warnPalette-500); | ||
| } | ||
|
|
||
| .example-trigger__icon-box--custom { | ||
| background: color-mix(in srgb, var(--alternative-color), transparent 80%); | ||
| color: var(--alternative-color); | ||
| background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 80%); | ||
| color: var(--color-alternativePalette-500); | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| .example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); } | ||
| .example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); } | ||
| .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); } | ||
| .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--alternative-color), transparent 88%); color: var(--alternative-color); } | ||
| .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successPalette-500), transparent 88%); color: var(--color-successPalette-500); } | ||
| .example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); } | ||
| .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnPalette-500), transparent 88%); color: var(--color-warnPalette-500); } | ||
| .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); color: var(--color-alternativePalette-500); } |
There was a problem hiding this comment.
Use the dark palette families in the dark override.
The light-mode mapping here is fine, but Lines 527-530 still render add/delete/custom with successPalette, warnPalette, and alternativePalette. frontend/src/main.ts:45-73 already defines successDarkPalette, warnDarkPalette, and alternativeDarkPalette for dark surfaces, so these three boxes end up dimmer than intended in dark mode.
🎨 Suggested fix
`@media` (prefers-color-scheme: dark) {
- .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successPalette-500), transparent 88%); color: var(--color-successPalette-500); }
+ .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successDarkPalette-500), transparent 88%); color: var(--color-successDarkPalette-500); }
.example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); }
- .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnPalette-500), transparent 88%); color: var(--color-warnPalette-500); }
- .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); color: var(--color-alternativePalette-500); }
+ .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnDarkPalette-500), transparent 88%); color: var(--color-warnDarkPalette-500); }
+ .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativeDarkPalette-500), transparent 88%); color: var(--color-alternativeDarkPalette-500); }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .example-trigger__icon-box--add { | |
| background: color-mix(in srgb, var(--success-color), transparent 80%); | |
| color: var(--success-color); | |
| background: color-mix(in srgb, var(--color-successPalette-500), transparent 80%); | |
| color: var(--color-successPalette-500); | |
| } | |
| .example-trigger__icon-box--update { | |
| background: color-mix(in srgb, var(--info-color), transparent 80%); | |
| color: var(--info-color); | |
| background: color-mix(in srgb, var(--color-infoPalette-500), transparent 80%); | |
| color: var(--color-infoPalette-500); | |
| } | |
| .example-trigger__icon-box--delete { | |
| background: color-mix(in srgb, var(--error-color), transparent 80%); | |
| color: var(--error-color); | |
| background: color-mix(in srgb, var(--color-warnPalette-500), transparent 80%); | |
| color: var(--color-warnPalette-500); | |
| } | |
| .example-trigger__icon-box--custom { | |
| background: color-mix(in srgb, var(--alternative-color), transparent 80%); | |
| color: var(--alternative-color); | |
| background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 80%); | |
| color: var(--color-alternativePalette-500); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); } | |
| .example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); } | |
| .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); } | |
| .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--alternative-color), transparent 88%); color: var(--alternative-color); } | |
| .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successPalette-500), transparent 88%); color: var(--color-successPalette-500); } | |
| .example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); } | |
| .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnPalette-500), transparent 88%); color: var(--color-warnPalette-500); } | |
| .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); color: var(--color-alternativePalette-500); } | |
| .example-trigger__icon-box--add { | |
| background: color-mix(in srgb, var(--color-successPalette-500), transparent 80%); | |
| color: var(--color-successPalette-500); | |
| } | |
| .example-trigger__icon-box--update { | |
| background: color-mix(in srgb, var(--color-infoPalette-500), transparent 80%); | |
| color: var(--color-infoPalette-500); | |
| } | |
| .example-trigger__icon-box--delete { | |
| background: color-mix(in srgb, var(--color-warnPalette-500), transparent 80%); | |
| color: var(--color-warnPalette-500); | |
| } | |
| .example-trigger__icon-box--custom { | |
| background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 80%); | |
| color: var(--color-alternativePalette-500); | |
| } | |
| `@media` (prefers-color-scheme: dark) { | |
| .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successDarkPalette-500), transparent 88%); color: var(--color-successDarkPalette-500); } | |
| .example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); } | |
| .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnDarkPalette-500), transparent 88%); color: var(--color-warnDarkPalette-500); } | |
| .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativeDarkPalette-500), transparent 88%); color: var(--color-alternativeDarkPalette-500); } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css`
around lines 506 - 530, In the dark-mode override, replace the light palette CSS
variables used in .example-trigger__icon-box--add, --update, --delete, and
--custom with their dark-palette counterparts so the icons use the intended
dark-theme colors; update the background and color references in the `@media`
(prefers-color-scheme: dark) block to use --color-successDarkPalette-500 for
.example-trigger__icon-box--add, --color-infoDarkPalette-500 for
.example-trigger__icon-box--update (if defined), --color-warnDarkPalette-500 for
.example-trigger__icon-box--delete, and --color-alternativeDarkPalette-500 for
.example-trigger__icon-box--custom, keeping the same color-mix transparency
values.
| @media (prefers-color-scheme: dark) { | ||
| .affects-row ::ng-deep .mat-button-toggle-checked, | ||
| .action-methods ::ng-deep .mat-button-toggle-checked { | ||
| background-color: var(--color-accentedPalette-800); | ||
| color: var(--color-accentedPalette-800-contrast); | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, check if the file exists and its content around the specified lines
fd -t f "db-table-actions.component.css" frontend/Repository: rocket-admin/rocketadmin
Length of output: 167
🏁 Script executed:
#!/bin/bash
# Check file size and read around lines 1035-1041
wc -l frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.cssRepository: rocket-admin/rocketadmin
Length of output: 172
🏁 Script executed:
#!/bin/bash
# Search for stylelint configuration files
find . -type f -name ".stylelintrc*" -o -name "stylelint.config.*" | head -20Repository: rocket-admin/rocketadmin
Length of output: 87
🏁 Script executed:
#!/bin/bash
# Read the specific lines around 1035-1041
sed -n '1030,1050p' frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.cssRepository: rocket-admin/rocketadmin
Length of output: 635
🏁 Script executed:
#!/bin/bash
# Check the stylelint configuration
cat ./.stylelintrc.jsonRepository: rocket-admin/rocketadmin
Length of output: 1074
🏁 Script executed:
#!/bin/bash
# Check if custom-theme.scss exists as suggested
find . -type f -name "custom-theme.scss"Repository: rocket-admin/rocketadmin
Length of output: 100
🏁 Script executed:
#!/bin/bash
# Search for ::ng-deep occurrences to understand the pattern
rg "::ng-deep" --type css --type scss -cRepository: rocket-admin/rocketadmin
Length of output: 96
🏁 Script executed:
#!/bin/bash
# Look at the structure of global stylesheets
fd -t f "custom-theme\|global\|theme" frontend/src/ | grep -E "\.(scss|css)$" | head -20Repository: rocket-admin/rocketadmin
Length of output: 50
🏁 Script executed:
#!/bin/bash
# Search for ::ng-deep without type filter
rg "::ng-deep" | head -30Repository: rocket-admin/rocketadmin
Length of output: 3721
🏁 Script executed:
#!/bin/bash
# Check the custom-theme.scss content to see if similar rules exist
head -100 frontend/src/custom-theme.scssRepository: rocket-admin/rocketadmin
Length of output: 5160
🏁 Script executed:
#!/bin/bash
# Also check if there are lint suppressions patterns used elsewhere
rg "stylelint-disable" --max-count 20Repository: rocket-admin/rocketadmin
Length of output: 50
Add a stylelint-disable comment to suppress the selector-pseudo-element-no-unknown error.
The ::ng-deep pseudo-element triggers stylelint's selector-pseudo-element-no-unknown rule (which is not disabled in .stylelintrc.json). Since ::ng-deep is an Angular-specific feature necessary for piercing component encapsulation to style Material Design components, add /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ before these selectors rather than moving them to a global stylesheet. This is a common pattern in the codebase and is idiomatic for Angular component styling.
🧰 Tools
🪛 Stylelint (17.5.0)
[error] 1036-1036: Unexpected unknown pseudo-element selector "::ng-deep" (selector-pseudo-element-no-unknown)
(selector-pseudo-element-no-unknown)
[error] 1037-1037: Unexpected unknown pseudo-element selector "::ng-deep" (selector-pseudo-element-no-unknown)
(selector-pseudo-element-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css`
around lines 1035 - 1041, Add a stylelint disable comment immediately before the
Angular-specific selectors to suppress the selector-pseudo-element-no-unknown
rule: insert /* stylelint-disable-next-line selector-pseudo-element-no-unknown
*/ just above the rules that target .affects-row ::ng-deep
.mat-button-toggle-checked and .action-methods ::ng-deep
.mat-button-toggle-checked in db-table-actions.component.css so the ::ng-deep
pseudo-element is allowed without moving the styles to a global stylesheet.
| type Palettes = { | ||
| primaryPalette?: string; | ||
| accentedPalette?: string; | ||
| warnPalette?: string; | ||
| whitePalette?: string; | ||
| warnDarkPalette?: string; | ||
| warningPalette?: string; | ||
| infoPalette?: string; | ||
| successPalette?: string; | ||
| alternativePalette?: string; | ||
| successDarkPalette?: string; | ||
| alternativeDarkPalette?: string; | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In @brumeilde/ngx-theme, does NgxThemeService.updateColors({ palettes }) deep-merge with existing palette keys, or replace the whole palettes object when some keys are omitted?
💡 Result:
No definitive evidence found for @brumeilde/ngx-theme package or NgxThemeService.updateColors method across npm registry, GitHub repositories, documentation sites, or source code. Searches returned various Angular theme libraries (ngx-theme by phillipcurl, ngx-themes-plus, nebular/theme) but none matching the exact package name or service method signature. The package may be private, unpublished, deprecated, or misspelled. Without source code or official documentation, cannot determine if updateColors({ palettes }) deep-merges existing palette keys or replaces the entire palettes object when keys are omitted.
Citations:
- 1: https://phillipcurl.github.io/ngx-theme/docs/
- 2: https://registry.npmjs.org/ngx-themes-plus
- 3: https://npm.io/package/ngx-themes-plus
- 4: https://www.npmjs.com/package/@nebular/theme
- 5: https://registry.npmjs.org/%40angularui%2Ftheme
🏁 Script executed:
# First, locate and examine the connections.service.ts file
find . -name "connections.service.ts" -type fRepository: rocket-admin/rocketadmin
Length of output: 118
🏁 Script executed:
# Check if package.json exists and look for `@brumeilde/ngx-theme`
find . -name "package.json" -type f | head -5Repository: rocket-admin/rocketadmin
Length of output: 197
🏁 Script executed:
# Search for NgxThemeService imports and usage
rg "NgxThemeService|@brumeilde/ngx-theme" --type ts --type jsonRepository: rocket-admin/rocketadmin
Length of output: 756
🏁 Script executed:
# Look for updateColors method definition or usage patterns
rg "updateColors" --type ts -B 2 -A 5Repository: rocket-admin/rocketadmin
Length of output: 5653
🏁 Script executed:
# Read the connections.service.ts file to see current state
head -50 ./frontend/src/app/services/connections.service.ts | cat -nRepository: rocket-admin/rocketadmin
Length of output: 1899
🏁 Script executed:
# Look for the Palettes type definition specifically
rg "type Palettes" -A 15 ./frontend/src/app/services/connections.service.tsRepository: rocket-admin/rocketadmin
Length of output: 438
🏁 Script executed:
# Check the test file to understand expected behavior
cat -n ./frontend/src/app/services/connections.service.spec.ts | grep -A 10 "updateColors"Repository: rocket-admin/rocketadmin
Length of output: 1105
🏁 Script executed:
# Search for all updateColors calls to see complete picture
rg "updateColors\(" -B 3 -A 8 ./frontend/src/app/services/connections.service.ts | head -100Repository: rocket-admin/rocketadmin
Length of output: 2724
🏁 Script executed:
# Let's check the specific line numbers mentioned in the review
# Lines: 170-180, 184-195, 201-212, 314-320, 324-335, 506-515
sed -n '170,212p' ./frontend/src/app/services/connections.service.ts | cat -nRepository: rocket-admin/rocketadmin
Length of output: 1661
🏁 Script executed:
# Check lines 314-335
sed -n '314,335p' ./frontend/src/app/services/connections.service.ts | cat -nRepository: rocket-admin/rocketadmin
Length of output: 868
🏁 Script executed:
# Check lines 506-515
sed -n '506,515p' ./frontend/src/app/services/connections.service.ts | cat -nRepository: rocket-admin/rocketadmin
Length of output: 468
🏁 Script executed:
# Get total line count to verify which sections exist
wc -l ./frontend/src/app/services/connections.service.tsRepository: rocket-admin/rocketadmin
Length of output: 122
🏁 Script executed:
# Let me verify if warnPalette or whitePalette are used elsewhere in the codebase
rg "warnPalette|whitePalette" --type ts --type scss --type cssRepository: rocket-admin/rocketadmin
Length of output: 96
🏁 Script executed:
# Search for warnPalette or whitePalette usage in TypeScript and CSS files
rg "warnPalette|whitePalette" --type ts --type cssRepository: rocket-admin/rocketadmin
Length of output: 6724
🏁 Script executed:
# Also check if these are used in HTML templates
rg "warnPalette|whitePalette"Repository: rocket-admin/rocketadmin
Length of output: 6831
🏁 Script executed:
# Let me check the main.ts file to see how warnPalette and whitePalette are initially set up
cat -n ./frontend/src/main.ts | head -100Repository: rocket-admin/rocketadmin
Length of output: 4982
🏁 Script executed:
# Check if there's any documentation on how updateColors works
find . -name "*.md" -type f -exec grep -l "updateColors\|NgxThemeService" {} \;Repository: rocket-admin/rocketadmin
Length of output: 50
🏁 Script executed:
# Check how main.ts initializes the theme and if there's any documentation
sed -n '45,100p' ./frontend/src/main.ts | cat -nRepository: rocket-admin/rocketadmin
Length of output: 2482
Inconsistent Palettes type definition between main.ts and connections.service.ts.
The Palettes type in connections.service.ts (lines 21–33) has all properties optional, while main.ts (lines 61–73) defines it with all required fields. This inconsistency weakens type safety. Additionally, all updateColors() calls in connections.service.ts omit warnPalette, warnDarkPalette, and whitePalette—fields that are initialized in main.ts's colorConfig and actively used in component CSS files for error states and button styling.
To improve clarity and ensure type consistency, align the Palettes type definition with main.ts by making all fields required. If partial updates are intentional (relying on values persisting from app initialization), document this pattern explicitly.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/app/services/connections.service.ts` around lines 21 - 33, The
Palettes type in connections.service.ts is declared with all optional fields
which conflicts with the required-field Palettes used in main.ts and allows
accidental omission of critical color properties; change the Palettes type in
connections.service.ts to make all fields required to match the definition in
main.ts (ensure fields: primaryPalette, accentedPalette, warnPalette,
whitePalette, warnDarkPalette, warningPalette, infoPalette, successPalette,
alternativePalette, successDarkPalette, alternativeDarkPalette are non-optional)
and update callers (notably updateColors()) to pass or merge all required
properties (or explicitly document/implement a merge pattern that fills missing
fields from colorConfig initialized in main.ts) so warnPalette, warnDarkPalette
and whitePalette are always present where used.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Documentation