Skip to content

Color palettes #1697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 5 commits into from
Apr 3, 2026
Merged

Color palettes #1697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c8eb49
add purple color to dark theme and update Automations colors
lyubov-voloshko Apr 1, 2026
f6fa7cd
create angular color palettes for error, warning, info, siccess and a…
lyubov-voloshko Apr 2, 2026
326f117
add rule to claude for color usage
lyubov-voloshko Apr 2, 2026
8574500
fix unit tests
lyubov-voloshko Apr 3, 2026
c21bff4
Merge branch 'main' into color-palettes
lyubov-voloshko Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion frontend/CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,9 +301,16 @@ Custom launcher `ChromeHeadlessCustom` is configured for CI with flags `--no-san

## 🎨 Styling & Theming

### Color Usage Rule
**Only use colors from the generated palettes defined in `src/main.ts` (`colorConfig`).** Do not hardcode arbitrary color values in components or stylesheets. Instead, reference the palette CSS variables generated by `@brumeilde/ngx-theme` from these palettes:
- `primaryPalette`, `accentedPalette`, `warnPalette`, `whitePalette`, `warnDarkPalette`
- `warningPalette`, `infoPalette`, `successPalette`, `alternativePalette`
- `successDarkPalette`, `alternativeDarkPalette`
- Simple colors: `myColorName`

### Material Design
- Uses Material Design 2 (M2) APIs
- Custom theme with light/dark mode support
- Custom theme with light/dark mode support
- SCSS preprocessing with Material theme presets
- Custom theme files: `src/custom-theme.scss`, `src/styles.scss`

Expand Down
16 changes: 2 additions & 14 deletions frontend/src/app/components/company/company.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,23 +109,11 @@
}

.company-member-cell_accessed {
color: #1b5e20;
}

@media (prefers-color-scheme: dark) {
.company-member-cell_accessed {
color: #4caf50;
}
color: var(--color-successPalette-500);
}

.company-member-cell_not-accessed {
color: #b71c1c;
}

@media (prefers-color-scheme: dark) {
.company-member-cell_not-accessed {
color: #e53935;
}
color: var(--color-warnPalette-500);
}

Copilot AI Apr 2, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
@media (prefers-color-scheme: dark) {
.company-member-cell_accessed {
color: var(--color-successDarkPalette-500);
}
.company-member-cell_not-accessed {
color: var(--color-warnDarkPalette-500);
}
}

Copilot uses AI. Check for mistakes.
.company-member-cell_content-center {
Expand Down
140 changes: 70 additions & 70 deletions ...rc/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@

.example-flow__badge--when {
background: #ede9fe;
color: #6d28d9;
color: var(--color-alternativePalette-500);
}

.example-flow__badge--action {
Expand Down Expand Up @@ -504,30 +504,30 @@
}

.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); }
Comment on lines 506 to +530

@coderabbitai coderabbitai Bot Apr 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
.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.

}

.example-trigger__text {
Expand Down Expand Up @@ -862,24 +862,24 @@
.trigger-pills__or {
font-size: 11px;
font-weight: 500;
color: #5a5a70;
color: rgba(255, 255, 255, 0.24);
text-transform: uppercase;
letter-spacing: 0.03em;
}

@media (prefers-color-scheme: light) {
.trigger-pills__or {
color: #94a3b8;
color: rgba(0, 0, 0, 0.32);
}
}

.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;
Comment on lines 876 to 883

Copilot AI Apr 2, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.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).

Copilot uses AI. Check for mistakes.
font-size: 12px;
font-weight: 600;
Expand All @@ -900,91 +900,83 @@
}

/* Default colored text & icons per type (muted when not selected) */
.trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 40%); }
.trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 40%); }
.trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 40%); }
.trigger-pill--custom { color: #8660b0; }

/* Full saturation when active */
.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: #c084fc; }
.trigger-pill--add-row { color: var(--color-successDarkPalette-700); }
.trigger-pill--update-row { color: var(--color-infoPalette-700); }
.trigger-pill--delete-row { color: var(--color-warnDarkPalette-700); }
.trigger-pill--custom { color: var(--color-alternativeDarkPalette-700); }

.trigger-pill:hover {
border-color: #3a3a50;
background: #161620;
background: rgba(255, 255, 255, 0.036);
}

/* Active states */
.trigger-pill--add-row.trigger-pill--active {
border-color: var(--success-color);
background: color-mix(in srgb, var(--success-color), transparent 90%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--success-color), transparent 92%);
border-color: var(--color-successDarkPalette-500);
background: var(--color-successDarkPalette-900);
box-shadow: 0 0 0 1px var(--color-successDarkPalette-800), 0 0 12px var(--color-successDarkPalette-900);
color: var(--color-successDarkPalette-500);
}

.trigger-pill--update-row.trigger-pill--active {
border-color: var(--info-color);
background: color-mix(in srgb, var(--info-color), transparent 90%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--info-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--info-color), transparent 92%);
border-color: var(--color-infoPalette-500);
background: var(--color-infoPalette-900);
box-shadow: 0 0 0 1px var(--color-infoPalette-800), 0 0 12px var(--color-infoPalette-900);
color: var(--color-infoPalette-500);
}

.trigger-pill--delete-row.trigger-pill--active {
border-color: var(--error-color);
background: color-mix(in srgb, var(--error-color), transparent 90%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--error-color), transparent 92%);
border-color: var(--color-warnDarkPalette-500);
background: var(--color-warnDarkPalette-900);
box-shadow: 0 0 0 1px var(--color-warnDarkPalette-800), 0 0 12px var(--color-warnDarkPalette-900);
color: var(--color-warnDarkPalette-500);
}

.trigger-pill--custom.trigger-pill--active {
border-color: #c084fc;
background: color-mix(in srgb, #c084fc, transparent 90%);
box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08);
border-color: var(--color-alternativeDarkPalette-500);
background: var(--color-alternativeDarkPalette-900);
box-shadow: 0 0 0 1px var(--color-alternativeDarkPalette-800), 0 0 12px var(--color-alternativeDarkPalette-900);
color: var(--color-alternativeDarkPalette-500);
}

/* 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);
}
Comment on lines 941 to 951

Copilot AI Apr 2, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

/* Active states */
.trigger-pill--add-row.trigger-pill--active {
border-color: var(--success-color);
background: color-mix(in srgb, var(--success-color), transparent 92%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color), transparent 75%);
border-color: var(--color-successPalette-500);
background: var(--color-successPalette-100);
box-shadow: 0 0 0 1px var(--color-successPalette-100), 0 0 12px var(--color-successPalette-50);
color: var(--color-successPalette-500);
}

.trigger-pill--update-row.trigger-pill--active {
border-color: var(--info-color);
background: color-mix(in srgb, var(--info-color), transparent 92%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--info-color), transparent 75%);
border-color: var(--color-infoPalette-500);
background: var(--color-infoPalette-100);
box-shadow: 0 0 0 1px var(--color-infoPalette-100), 0 0 12px var(--color-infoPalette-50);
color: var(--color-infoPalette-500);
}

.trigger-pill--delete-row.trigger-pill--active {
border-color: var(--error-color);
background: color-mix(in srgb, var(--error-color), transparent 92%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color), transparent 75%);
border-color: var(--color-warnPalette-500);
background: var(--color-warnPalette-100);
box-shadow: 0 0 0 1px var(--color-warnPalette-100), 0 0 12px var(--color-warnPalette-50);
color: var(--color-warnPalette-500);
}

.trigger-pill--custom.trigger-pill--active {
border-color: #9333ea;
background: #faf5ff;
box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.25);
border-color: var(--color-alternativePalette-500);
background: var(--color-alternativePalette-100);
box-shadow: 0 0 0 1px var(--color-alternativePalette-100), 0 0 12px var(--color-alternativePalette-50);
color: var(--color-alternativePalette-500);
}
}

Expand Down Expand Up @@ -1040,6 +1032,14 @@
color: var(--color-accentedPalette-100-contrast);
}

@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);
}
}
Comment on lines +1035 to +1041

@coderabbitai coderabbitai Bot Apr 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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.css

Repository: 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 -20

Repository: 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.css

Repository: rocket-admin/rocketadmin

Length of output: 635

🏁 Script executed:

#!/bin/bash
# Check the stylelint configuration
cat ./.stylelintrc.json

Repository: 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 -c

Repository: 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 -20

Repository: rocket-admin/rocketadmin

Length of output: 50

🏁 Script executed:

#!/bin/bash
# Search for ::ng-deep without type filter
rg "::ng-deep" | head -30

Repository: 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.scss

Repository: 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 20

Repository: 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.


/* ── Action methods ── */

.action-methods {
Expand Down
6 changes: 3 additions & 3 deletions ...src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,9 @@ export class DbTableActionsComponent implements OnInit {
];

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: '#4caf50' },
[EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: '#2196f3' },
[EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: '#e53935' },
[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' },
};
public selectedEvents: string[] = [];
Expand Down
12 changes: 4 additions & 8 deletions ...ts/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background-color: color-mix(in hsl, #296ee9, transparent 95%);
background-color: var(--color-infoPalette-50);
border-radius: 4px;
margin-bottom: 20px;
}

.info-icon {
color: #296ee9;
color: var(--color-infoPalette-500);
font-size: 20px;
width: 20px;
height: 20px;
Expand All @@ -30,14 +30,10 @@
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.folder-info {
background-color: color-mix(in hsl, #296ee9, transparent 75%);
}

.info-icon {
color: #296ee9;
background-color: var(--color-infoPalette-800);
}

.info-text {
color: #e0e0e0;
color: rgba(255, 255, 255, 0.72);
}
}
Loading
Loading