Add more primary and surface colors (#1223)

2026-02-18 00:17:53 +01:00 · 2025-09-26 17:36:26 -06:00
parent b757bc4135
commit 2a57d0babd
3 changed files with 432 additions and 3 deletions
--- a/booklore-ui/src/app/core/service/app-config.service.ts
+++ b/booklore-ui/src/app/core/service/app-config.service.ts
@@ -107,6 +107,125 @@ export class AppConfigService {
        950: '#0c0a09'
      }
    },
+    {
+      name: 'iron',
+      palette: {
+        0: '#ffffff',
+        50: '#f1f3f4',
+        100: '#e3e5e6',
+        200: '#d2d4d6',
+        300: '#b8bbc0',
+        400: '#9ca0a6',
+        500: '#7d8288',
+        600: '#646a70',
+        700: '#4c5258',
+        800: '#353a40',
+        900: '#1a1d20',
+        950: '#0d0f11'
+      }
+    },
+    {
+      name: 'steel',
+      palette: {
+        0: '#ffffff',
+        50: '#f3f4f6',
+        100: '#e5e7eb',
+        200: '#d1d5db',
+        300: '#b0b7c3',
+        400: '#8b93a6',
+        500: '#6b7280',
+        600: '#545861',
+        700: '#3f4347',
+        800: '#2c2f33',
+        900: '#16181b',
+        950: '#0b0d0e'
+      }
+    },
+    {
+      name: 'carbon',
+      palette: {
+        0: '#ffffff',
+        50: '#eef0f2',
+        100: '#dde1e6',
+        200: '#c7cdd5',
+        300: '#a8b0bc',
+        400: '#8691a0',
+        500: '#697080',
+        600: '#545a66',
+        700: '#41464f',
+        800: '#303439',
+        900: '#181a1d',
+        950: '#0c0e10'
+      }
+    },
+    {
+      name: 'ash',
+      palette: {
+        0: '#ffffff',
+        50: '#f4f6f8',
+        100: '#e6e9ed',
+        200: '#d3d8de',
+        300: '#b4bcc7',
+        400: '#919ca9',
+        500: '#71808a',
+        600: '#5a666f',
+        700: '#464f56',
+        800: '#34393e',
+        900: '#1a1e21',
+        950: '#0d1012'
+      }
+    },
+    {
+      name: 'smoke',
+      palette: {
+        0: '#ffffff',
+        50: '#f6f6f7',
+        100: '#ebebed',
+        200: '#dadadd',
+        300: '#bbbcc1',
+        400: '#989aa1',
+        500: '#797c84',
+        600: '#63666d',
+        700: '#4f5257',
+        800: '#3a3d42',
+        900: '#1d2023',
+        950: '#0e1011'
+      }
+    },
+    {
+      name: 'midnight-blue',
+      palette: {
+        0: '#ffffff',
+        50: '#fcfcfd',
+        100: '#f7f8fb',
+        200: '#f0f2f7',
+        300: '#e5e8f0',
+        400: '#d3d8e3',
+        500: '#5c6b7a',
+        600: '#4a5866',
+        700: '#3b4651',
+        800: '#2d353e',
+        900: '#1f252c',
+        950: '#121518'
+      }
+    },
+    {
+      name: 'charcoal',
+      palette: {
+        0: '#ffffff',
+        50: '#f0f0f0',
+        100: '#e5e5e5',
+        200: '#d1d1d1',
+        300: '#b8b8b8',
+        400: '#9a9a9a',
+        500: '#7d7d7d',
+        600: '#666666',
+        700: '#525252',
+        800: '#3d3d3d',
+        900: '#2a2a2a',
+        950: '#141414'
+      }
+    },
    {
      name: 'soho',
      palette: {
@@ -157,6 +276,57 @@ export class AppConfigService {
        900: '#183240',
        950: '#0c1920'
      }
+    },
+    {
+      name: 'light-slate',
+      palette: {
+        0: '#ffffff',
+        50: '#fcfcfd',
+        100: '#f8fafc',
+        200: '#f1f5f9',
+        300: '#e2e8f0',
+        400: '#cbd5e1',
+        500: '#94a3b8',
+        600: '#64748b',
+        700: '#475569',
+        800: '#334155',
+        900: '#1e293b',
+        950: '#0f172a'
+      }
+    },
+    {
+      name: 'olive',
+      palette: {
+        0: '#ffffff',
+        50: '#fcfcfb',
+        100: '#f8f9f6',
+        200: '#f1f4ed',
+        300: '#e6eadc',
+        400: '#d4dfc5',
+        500: '#6a755e',
+        600: '#555d4c',
+        700: '#434a3d',
+        800: '#333930',
+        900: '#232824',
+        950: '#131614'
+      }
+    },
+    {
+      name: 'crimson',
+      palette: {
+        0: '#ffffff',
+        50: '#fcfbfb',
+        100: '#f8f5f5',
+        200: '#f1ebeb',
+        300: '#e6d9d9',
+        400: '#d4c3c3',
+        500: '#755e5e',
+        600: '#5d4c4c',
+        700: '#4a3d3d',
+        800: '#382f2f',
+        900: '#242020',
+        950: '#141212'
+      }
    }
  ];

--- a/booklore-ui/src/app/layout/component/theme-configurator/theme-configurator.component.ts
+++ b/booklore-ui/src/app/layout/component/theme-configurator/theme-configurator.component.ts
@@ -1,11 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {Component, computed, effect, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {$t} from '@primeng/themes';
-import Aura from '@primeng/themes/aura';
 import {ButtonModule} from 'primeng/button';
 import {RadioButtonModule} from 'primeng/radiobutton';
 import {ToggleSwitchModule} from 'primeng/toggleswitch';
+
+import Aura from '../theme-palette-extend';
+
 import {AppConfigService} from '../../../core/service/app-config.service';
 import {FaviconService} from './favicon-service';

@@ -53,7 +54,17 @@ export class ThemeConfiguratorComponent {

  readonly primaryColors = computed<Palette[]>(() => {
    const presetPalette = (Aura.primitive ?? {}) as Record<string, ColorPalette>;
-    const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+    const colors = [
+      'emerald', 'green', 'lime', 'orange', 'amber', 'yellow',
+      'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet',
+      'purple', 'fuchsia', 'pink', 'rose', 'red',
+      'coral', 'blush', 'coralFizz', 'melonFrost',
+      'apricotBreeze', 'bronze', 'butter', 'cream',
+      'citrusMint', 'sage', 'sagePearl', 'mintCandy',
+      'skyCandy', 'powder', 'periwinkleCream',
+      'lavenderDream', 'cottonCandy',
+      'dusty'
+    ];
    return [{name: 'noir', palette: {}}].concat(
      colors.map(name => ({
        name,
--- a/booklore-ui/src/app/layout/component/theme-palette-extend.ts
+++ b/booklore-ui/src/app/layout/component/theme-palette-extend.ts
@@ -0,0 +1,248 @@
+import Aura from '@primeng/themes/aura';
+
+type ColorPalette = Record<string, string>;
+
+const customPalettes: Record<string, ColorPalette> = {
+  coral: {
+    50: '#fef7f0',
+    100: '#feede1',
+    200: '#fcd9c2',
+    300: '#f9be9e',
+    400: '#f59673',
+    500: '#ef7550',
+    600: '#de5a3a',
+    700: '#b94730',
+    800: '#943a2e',
+    900: '#78322a',
+    950: '#401814'
+  },
+  blush: {
+    50: '#fef7f7',
+    100: '#feebeb',
+    200: '#fddcdc',
+    300: '#fbbfbf',
+    400: '#f69393',
+    500: '#ed6767',
+    600: '#d93f3f',
+    700: '#b73030',
+    800: '#982d2d',
+    900: '#7f2d2d',
+    950: '#451313'
+  },
+  coralFizz: {
+    50: '#fff8f7',
+    100: '#fff0ee',
+    200: '#ffdede',
+    300: '#ffc7c1',
+    400: '#ffac9f',
+    500: '#ff8f7f',
+    600: '#ff6f66',
+    700: '#e64f52',
+    800: '#b3343b',
+    900: '#7f2026',
+    950: '#3f0f12'
+  },
+  melonFrost: {
+    50: '#fffafb',
+    100: '#fff2f4',
+    200: '#ffdfe7',
+    300: '#ffcbd4',
+    400: '#ffaebb',
+    500: '#ff90a2',
+    600: '#ff6f88',
+    700: '#e8506b',
+    800: '#b7384d',
+    900: '#7f2231',
+    950: '#3f1118'
+  },
+  apricotBreeze: {
+    50: '#fffaf7',
+    100: '#fff1e8',
+    200: '#ffe2c9',
+    300: '#ffd2a8',
+    400: '#ffbf88',
+    500: '#ffad68',
+    600: '#ff974f',
+    700: '#e67a3b',
+    800: '#b6572b',
+    900: '#7f351b',
+    950: '#3f190f'
+  },
+  bronze: {
+    50: '#faf7f2',
+    100: '#f4ede0',
+    200: '#e8d9c0',
+    300: '#d9c199',
+    400: '#c8a56f',
+    500: '#b8904f',
+    600: '#a67c44',
+    700: '#8a6439',
+    800: '#715233',
+    900: '#5c442c',
+    950: '#302316'
+  },
+  butter: {
+    50: '#fffef7',
+    100: '#fffceb',
+    200: '#fff7d1',
+    300: '#ffeea7',
+    400: '#ffe072',
+    500: '#ffcf45',
+    600: '#ffb61f',
+    700: '#ff9b0a',
+    800: '#cc7606',
+    900: '#a35f0c',
+    950: '#633204'
+  },
+  cream: {
+    50: '#fefdfb',
+    100: '#fefbf6',
+    200: '#fdf5ea',
+    300: '#fbecd5',
+    400: '#f7dbb5',
+    500: '#f1c589',
+    600: '#e8a95c',
+    700: '#d88d3e',
+    800: '#b47134',
+    900: '#915c2e',
+    950: '#4e2f17'
+  },
+  citrusMint: {
+    50: '#fbfff9',
+    100: '#f4fff2',
+    200: '#e8ffd9',
+    300: '#d1ffbc',
+    400: '#b7ffa0',
+    500: '#96ff84',
+    600: '#76e96e',
+    700: '#4fb84c',
+    800: '#2f7f32',
+    900: '#1a4f20',
+    950: '#0a2410'
+  },
+  sage: {
+    50: '#f7f8f7',
+    100: '#eef0ed',
+    200: '#dde1da',
+    300: '#c4ccbe',
+    400: '#a6b29d',
+    500: '#8a9580',
+    600: '#6f7a67',
+    700: '#5a6354',
+    800: '#4a5146',
+    900: '#3e433b',
+    950: '#22251f'
+  },
+  sagePearl: {
+    50: '#fbfdfb',
+    100: '#f4f8f4',
+    200: '#e6efe6',
+    300: '#d1e6d1',
+    400: '#bcdcbf',
+    500: '#9fcfa8',
+    600: '#84b792',
+    700: '#5f8f6e',
+    800: '#3f6648',
+    900: '#25442e',
+    950: '#0f2118'
+  },
+  mintCandy: {
+    50: '#f8fff9',
+    100: '#f0fff3',
+    200: '#dcffea',
+    300: '#bfffd6',
+    400: '#99ffc2',
+    500: '#7fffae',
+    600: '#5fe592',
+    700: '#3fbf75',
+    800: '#2d8f55',
+    900: '#1e5f39',
+    950: '#0f2f1d'
+  },
+  skyCandy: {
+    50: '#f7fbff',
+    100: '#eef6ff',
+    200: '#dceefd',
+    300: '#c1e8ff',
+    400: '#99dfff',
+    500: '#6fc8ff',
+    600: '#48afff',
+    700: '#2e88e6',
+    800: '#2360b3',
+    900: '#153d80',
+    950: '#071d40'
+  },
+  powder: {
+    50: '#f8fafc',
+    100: '#f0f4f8',
+    200: '#e2e9f0',
+    300: '#cbd7e3',
+    400: '#a8bed1',
+    500: '#89a4bb',
+    600: '#6e8ba3',
+    700: '#5a738a',
+    800: '#4c5f71',
+    900: '#41505e',
+    950: '#2a343d'
+  },
+  periwinkleCream: {
+    50: '#fbfbff',
+    100: '#f2f3ff',
+    200: '#e7eaff',
+    300: '#d2dcff',
+    400: '#b9c9ff',
+    500: '#9fb2ff',
+    600: '#7f97ff',
+    700: '#5f78e6',
+    800: '#4559b3',
+    900: '#2b387f',
+    950: '#151c40'
+  },
+  lavenderDream: {
+    50: '#fbf7ff',
+    100: '#f6eeff',
+    200: '#ebdcff',
+    300: '#dcc0ff',
+    400: '#caa1ff',
+    500: '#b47fff',
+    600: '#9366e6',
+    700: '#6f45b3',
+    800: '#4c2f80',
+    900: '#2d1b4f',
+    950: '#15082a'
+  },
+  cottonCandy: {
+    50: '#fff9fb',
+    100: '#fff0f6',
+    200: '#ffdfee',
+    300: '#ffc0e0',
+    400: '#ffa3cf',
+    500: '#ff86bf',
+    600: '#ff69ad',
+    700: '#e14f93',
+    800: '#b93a72',
+    900: '#86284f',
+    950: '#42142a'
+  },
+  dusty: {
+    50: '#faf9f7',
+    100: '#f3f1ed',
+    200: '#e8e3db',
+    300: '#d8cfc2',
+    400: '#c4b5a3',
+    500: '#b39c85',
+    600: '#a28a70',
+    700: '#87725d',
+    800: '#6f5e4e',
+    900: '#5a4e42',
+    950: '#2f2821'
+  }
+};
+
+if (!Aura.primitive) {
+  Aura.primitive = {};
+}
+
+Object.assign(Aura.primitive, customPalettes);
+
+export default Aura;