Skip to content

Commit 4e99c4b

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1697 from rocket-admin/color-palettes
Color palettes
2 parents 3dedea9 + c21bff4 commit 4e99c4b

20 files changed

Lines changed: 265 additions & 338 deletions

File tree

‎frontend/CLAUDE.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,9 +301,16 @@ Custom launcher `ChromeHeadlessCustom` is configured for CI with flags `--no-san
301301

302302
## 🎨 Styling & Theming
303303

304+
### Color Usage Rule
305+
**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:
306+
- `primaryPalette`, `accentedPalette`, `warnPalette`, `whitePalette`, `warnDarkPalette`
307+
- `warningPalette`, `infoPalette`, `successPalette`, `alternativePalette`
308+
- `successDarkPalette`, `alternativeDarkPalette`
309+
- Simple colors: `myColorName`
310+
304311
### Material Design
305312
- Uses Material Design 2 (M2) APIs
306-
- Custom theme with light/dark mode support
313+
- Custom theme with light/dark mode support
307314
- SCSS preprocessing with Material theme presets
308315
- Custom theme files: `src/custom-theme.scss`, `src/styles.scss`
309316

‎frontend/src/app/components/company/company.component.css‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -109,23 +109,11 @@
109109
}
110110

111111
.company-member-cell_accessed {
112-
color: #1b5e20;
113-
}
114-
115-
@media (prefers-color-scheme: dark) {
116-
.company-member-cell_accessed {
117-
color: #4caf50;
118-
}
112+
color: var(--color-successPalette-500);
119113
}
120114

121115
.company-member-cell_not-accessed {
122-
color: #b71c1c;
123-
}
124-
125-
@media (prefers-color-scheme: dark) {
126-
.company-member-cell_not-accessed {
127-
color: #e53935;
128-
}
116+
color: var(--color-warnPalette-500);
129117
}
130118

131119
.company-member-cell_content-center {

‎frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@
442442

443443
.example-flow__badge--when {
444444
background: #ede9fe;
445-
color: #6d28d9;
445+
color: var(--color-alternativePalette-500);
446446
}
447447

448448
.example-flow__badge--action {
@@ -504,30 +504,30 @@
504504
}
505505

506506
.example-trigger__icon-box--add {
507-
background: color-mix(in srgb, var(--success-color), transparent 80%);
508-
color: var(--success-color);
507+
background: color-mix(in srgb, var(--color-successPalette-500), transparent 80%);
508+
color: var(--color-successPalette-500);
509509
}
510510

511511
.example-trigger__icon-box--update {
512-
background: color-mix(in srgb, var(--info-color), transparent 80%);
513-
color: var(--info-color);
512+
background: color-mix(in srgb, var(--color-infoPalette-500), transparent 80%);
513+
color: var(--color-infoPalette-500);
514514
}
515515

516516
.example-trigger__icon-box--delete {
517-
background: color-mix(in srgb, var(--error-color), transparent 80%);
518-
color: var(--error-color);
517+
background: color-mix(in srgb, var(--color-warnPalette-500), transparent 80%);
518+
color: var(--color-warnPalette-500);
519519
}
520520

521521
.example-trigger__icon-box--custom {
522-
background: color-mix(in srgb, var(--alternative-color), transparent 80%);
523-
color: var(--alternative-color);
522+
background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 80%);
523+
color: var(--color-alternativePalette-500);
524524
}
525525

526526
@media (prefers-color-scheme: dark) {
527-
.example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); }
528-
.example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); }
529-
.example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); }
530-
.example-trigger__icon-box--custom { background: color-mix(in srgb, var(--alternative-color), transparent 88%); color: var(--alternative-color); }
527+
.example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successPalette-500), transparent 88%); color: var(--color-successPalette-500); }
528+
.example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); }
529+
.example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnPalette-500), transparent 88%); color: var(--color-warnPalette-500); }
530+
.example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); color: var(--color-alternativePalette-500); }
531531
}
532532

533533
.example-trigger__text {
@@ -862,24 +862,24 @@
862862
.trigger-pills__or {
863863
font-size: 11px;
864864
font-weight: 500;
865-
color: #5a5a70;
865+
color: rgba(255, 255, 255, 0.24);
866866
text-transform: uppercase;
867867
letter-spacing: 0.03em;
868868
}
869869

870870
@media (prefers-color-scheme: light) {
871871
.trigger-pills__or {
872-
color: #94a3b8;
872+
color: rgba(0, 0, 0, 0.32);
873873
}
874874
}
875875

876876
.trigger-pill {
877877
display: inline-flex;
878878
align-items: center;
879-
gap: 7px;
879+
gap: 8px;
880880
padding: 7px 14px;
881-
border-radius: 8px;
882-
border: 1px solid #2a2a3a;
881+
border-radius: 4px;
882+
border: 1px solid var(--mat-button-outlined-outline-color);
883883
background: #0f0f18;
884884
font-size: 12px;
885885
font-weight: 600;
@@ -900,91 +900,83 @@
900900
}
901901

902902
/* Default colored text & icons per type (muted when not selected) */
903-
.trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 40%); }
904-
.trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 40%); }
905-
.trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 40%); }
906-
.trigger-pill--custom { color: #8660b0; }
907-
908-
/* Full saturation when active */
909-
.trigger-pill--add-row.trigger-pill--active { color: var(--success-color); }
910-
.trigger-pill--update-row.trigger-pill--active { color: var(--info-color); }
911-
.trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); }
912-
.trigger-pill--custom.trigger-pill--active { color: #c084fc; }
903+
.trigger-pill--add-row { color: var(--color-successDarkPalette-700); }
904+
.trigger-pill--update-row { color: var(--color-infoPalette-700); }
905+
.trigger-pill--delete-row { color: var(--color-warnDarkPalette-700); }
906+
.trigger-pill--custom { color: var(--color-alternativeDarkPalette-700); }
913907

914908
.trigger-pill:hover {
915-
border-color: #3a3a50;
916-
background: #161620;
909+
background: rgba(255, 255, 255, 0.036);
917910
}
918911

919912
/* Active states */
920913
.trigger-pill--add-row.trigger-pill--active {
921-
border-color: var(--success-color);
922-
background: color-mix(in srgb, var(--success-color), transparent 90%);
923-
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%);
914+
border-color: var(--color-successDarkPalette-500);
915+
background: var(--color-successDarkPalette-900);
916+
box-shadow: 0 0 0 1px var(--color-successDarkPalette-800), 0 0 12px var(--color-successDarkPalette-900);
917+
color: var(--color-successDarkPalette-500);
924918
}
925919

926920
.trigger-pill--update-row.trigger-pill--active {
927-
border-color: var(--info-color);
928-
background: color-mix(in srgb, var(--info-color), transparent 90%);
929-
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%);
921+
border-color: var(--color-infoPalette-500);
922+
background: var(--color-infoPalette-900);
923+
box-shadow: 0 0 0 1px var(--color-infoPalette-800), 0 0 12px var(--color-infoPalette-900);
924+
color: var(--color-infoPalette-500);
930925
}
931926

932927
.trigger-pill--delete-row.trigger-pill--active {
933-
border-color: var(--error-color);
934-
background: color-mix(in srgb, var(--error-color), transparent 90%);
935-
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%);
928+
border-color: var(--color-warnDarkPalette-500);
929+
background: var(--color-warnDarkPalette-900);
930+
box-shadow: 0 0 0 1px var(--color-warnDarkPalette-800), 0 0 12px var(--color-warnDarkPalette-900);
931+
color: var(--color-warnDarkPalette-500);
936932
}
937933

938934
.trigger-pill--custom.trigger-pill--active {
939-
border-color: #c084fc;
940-
background: color-mix(in srgb, #c084fc, transparent 90%);
941-
box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08);
935+
border-color: var(--color-alternativeDarkPalette-500);
936+
background: var(--color-alternativeDarkPalette-900);
937+
box-shadow: 0 0 0 1px var(--color-alternativeDarkPalette-800), 0 0 12px var(--color-alternativeDarkPalette-900);
938+
color: var(--color-alternativeDarkPalette-500);
942939
}
943940

944941
/* Light mode overrides */
945942
@media (prefers-color-scheme: light) {
946-
.trigger-pill {
947-
background: #ffffff;
948-
border-color: #e2e8f0;
949-
}
950-
951-
.trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 35%); }
952-
.trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 35%); }
953-
.trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 35%); }
954-
.trigger-pill--custom { color: #9878bf; }
955-
956-
.trigger-pill--add-row.trigger-pill--active { color: var(--success-color); }
957-
.trigger-pill--update-row.trigger-pill--active { color: var(--info-color); }
958-
.trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); }
959-
.trigger-pill--custom.trigger-pill--active { color: #9333ea; }
943+
/* Default colored text & icons per type (muted when not selected) */
944+
.trigger-pill--add-row { color: var(--color-successPalette-300); background-color: transparent; }
945+
.trigger-pill--update-row { color: var(--color-infoPalette-300); background-color: transparent; }
946+
.trigger-pill--delete-row { color: var(--color-warnPalette-300); background-color: transparent; }
947+
.trigger-pill--custom { color: var(--color-alternativePalette-300); background-color: transparent; }
960948

961949
.trigger-pill:hover {
962-
border-color: #cbd5e1;
963-
background: #f8fafc;
950+
background: rgba(255, 255, 255, 0.036);
964951
}
965952

953+
/* Active states */
966954
.trigger-pill--add-row.trigger-pill--active {
967-
border-color: var(--success-color);
968-
background: color-mix(in srgb, var(--success-color), transparent 92%);
969-
box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color), transparent 75%);
955+
border-color: var(--color-successPalette-500);
956+
background: var(--color-successPalette-100);
957+
box-shadow: 0 0 0 1px var(--color-successPalette-100), 0 0 12px var(--color-successPalette-50);
958+
color: var(--color-successPalette-500);
970959
}
971960

972961
.trigger-pill--update-row.trigger-pill--active {
973-
border-color: var(--info-color);
974-
background: color-mix(in srgb, var(--info-color), transparent 92%);
975-
box-shadow: 0 0 0 1px color-mix(in srgb, var(--info-color), transparent 75%);
962+
border-color: var(--color-infoPalette-500);
963+
background: var(--color-infoPalette-100);
964+
box-shadow: 0 0 0 1px var(--color-infoPalette-100), 0 0 12px var(--color-infoPalette-50);
965+
color: var(--color-infoPalette-500);
976966
}
977967

978968
.trigger-pill--delete-row.trigger-pill--active {
979-
border-color: var(--error-color);
980-
background: color-mix(in srgb, var(--error-color), transparent 92%);
981-
box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color), transparent 75%);
969+
border-color: var(--color-warnPalette-500);
970+
background: var(--color-warnPalette-100);
971+
box-shadow: 0 0 0 1px var(--color-warnPalette-100), 0 0 12px var(--color-warnPalette-50);
972+
color: var(--color-warnPalette-500);
982973
}
983974

984975
.trigger-pill--custom.trigger-pill--active {
985-
border-color: #9333ea;
986-
background: #faf5ff;
987-
box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.25);
976+
border-color: var(--color-alternativePalette-500);
977+
background: var(--color-alternativePalette-100);
978+
box-shadow: 0 0 0 1px var(--color-alternativePalette-100), 0 0 12px var(--color-alternativePalette-50);
979+
color: var(--color-alternativePalette-500);
988980
}
989981
}
990982

@@ -1040,6 +1032,14 @@
10401032
color: var(--color-accentedPalette-100-contrast);
10411033
}
10421034

1035+
@media (prefers-color-scheme: dark) {
1036+
.affects-row ::ng-deep .mat-button-toggle-checked,
1037+
.action-methods ::ng-deep .mat-button-toggle-checked {
1038+
background-color: var(--color-accentedPalette-800);
1039+
color: var(--color-accentedPalette-800-contrast);
1040+
}
1041+
}
1042+
10431043
/* ── Action methods ── */
10441044

10451045
.action-methods {

‎frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ export class DbTableActionsComponent implements OnInit {
121121
];
122122

123123
public triggerMeta: Record<string, { icon: string; desc: string; color: string }> = {
124-
[EventType.AddRow]: { icon: 'add_circle_outline', desc: 'Fires when a new row is inserted', color: '#4caf50' },
125-
[EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: '#2196f3' },
126-
[EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: '#e53935' },
124+
[EventType.AddRow]: { icon: 'add_circle_outline', desc: 'Fires when a new row is inserted', color: 'var(--color-successPalette-500)' },
125+
[EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: 'var(--color-infoPalette-500)' },
126+
[EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: 'var(--color-warnPalette-500)' },
127127
[EventType.Custom]: { icon: 'tune', desc: 'Manual trigger with custom button', color: '#9c27b0' },
128128
};
129129
public selectedEvents: string[] = [];

‎frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
align-items: flex-start;
88
gap: 12px;
99
padding: 12px 16px;
10-
background-color: color-mix(in hsl, #296ee9, transparent 95%);
10+
background-color: var(--color-infoPalette-50);
1111
border-radius: 4px;
1212
margin-bottom: 20px;
1313
}
1414

1515
.info-icon {
16-
color: #296ee9;
16+
color: var(--color-infoPalette-500);
1717
font-size: 20px;
1818
width: 20px;
1919
height: 20px;
@@ -30,14 +30,10 @@
3030
/* Dark mode support */
3131
@media (prefers-color-scheme: dark) {
3232
.folder-info {
33-
background-color: color-mix(in hsl, #296ee9, transparent 75%);
34-
}
35-
36-
.info-icon {
37-
color: #296ee9;
33+
background-color: var(--color-infoPalette-800);
3834
}
3935

4036
.info-text {
41-
color: #e0e0e0;
37+
color: rgba(255, 255, 255, 0.72);
4238
}
4339
}

0 commit comments

Comments
 (0)