@udixio/theme 1.0.0-beta.6 → 1.0.0-beta.8

package/src/app.container.ts

@@ -8,6 +8,8 @@ import {
 import { ColorModule } from './color/color.module';
 import { ThemeModule } from './theme/theme.module';
 import { AppModule } from './app.module';
+import { ConfigModule } from './config/config.module';
+import { PluginModule } from './plugin/plugin.module';
 
 export type Module = Record<
   string,
@@ -30,7 +32,13 @@ const AppContainer = createContainer({
   injectionMode: InjectionMode.PROXY,
 });
 
-importContainer(AppContainer, [AppModule, ColorModule, ThemeModule]);
+importContainer(AppContainer, [
+  ConfigModule,
+  AppModule,
+  PluginModule,
+  ColorModule,
+  ThemeModule,
+]);
 
 // AppContainer.register(ColorModule.cradle);
 // AppContainer.register(ThemeModule.cradle);

package/src/app.service.ts

@@ -1,16 +1,22 @@
-import { ColorService } from './color/color.service';
-import { ThemeService } from './theme/services/theme.service';
+import { ColorService } from './color';
+import { ThemeService } from './theme';
+import { PluginService } from './plugin/plugin.service';
 
 export class AppService {
   public colorService: ColorService;
   public themeService: ThemeService;
+  public pluginService: PluginService;
+
   constructor({
     colorService,
     themeService,
+    pluginService,
   }: {
     colorService: ColorService;
     themeService: ThemeService;
+    pluginService: PluginService;
   }) {
+    this.pluginService = pluginService;
     this.colorService = colorService;
     this.themeService = themeService;
   }

package/src/color/color.interface.ts

@@ -9,7 +9,5 @@ export interface ColorInterface {
 
   updateColor(key: string, newColor: ColorOptions): ColorEntity;
 
-  getAllColors(): ReadonlyMap<string, ColorEntity>;
-
-  addColors(colors: Record<string, ColorOptions>): ColorEntity[];
+  getColors(): ReadonlyMap<string, ColorEntity>;
 }

package/src/color/color.module.ts

@@ -1,5 +1,5 @@
-import { ColorService } from './color.service';
-import { ColorManagerService } from './color-manager.service';
+import { ColorService } from './services/color.service';
+import { ColorManagerService } from './services/color-manager.service';
 import { asClass } from 'awilix';
 import { Module } from '../app.container';
 

package/src/color/entities/color.entity.ts

@@ -3,7 +3,7 @@ import { SchemeEntity } from '../../theme/entities/scheme.entity';
 import { DynamicColor } from '../../material-color-utilities/dynamic_color';
 import { ContrastCurve } from '../../material-color-utilities';
 import { SchemeService } from '../../theme/services/scheme.service';
-import { ColorManagerService } from '../color-manager.service';
+import { ColorManagerService } from '../services/color-manager.service';
 
 export interface ColorOptions {
   palette: (scheme: SchemeEntity) => TonalPalette;
@@ -21,6 +21,14 @@ export interface ColorOptions {
   };
 }
 
+function argbToRgb(argb: number): { r: number; g: number; b: number } {
+  return {
+    r: (argb >> 16) & 0xff,
+    g: (argb >> 8) & 0xff,
+    b: argb & 0xff,
+  };
+}
+
 export class ColorEntity {
   private dynamicColor: DynamicColor | null = null;
 
@@ -43,6 +51,10 @@ export class ColorEntity {
     return this.getDynamicColor().getArgb(this.schemeService.get());
   }
 
+  getRgb() {
+    return argbToRgb(this.getArgb());
+  }
+
   getName(): string {
     return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
   }

package/src/color/index.ts

@@ -1,6 +1,5 @@
-export * from './color-manager.service';
 export * from './color.interface';
 export * from './color.module';
-export * from './color.service';
 export * from './entities';
 export * from './models';
+export * from './services';

package/src/color/models/default-color.model.ts

@@ -1,8 +1,8 @@
 import { DislikeAnalyzer, Hct } from '@material/material-color-utilities';
 import { ContrastCurve, ToneDeltaPair } from '../../material-color-utilities';
 import { DynamicColor } from '../../material-color-utilities/dynamic_color';
-import { ColorOptions } from '../entities/color.entity';
-import { ColorManagerService, highestSurface } from '../color-manager.service';
+import { highestSurface } from '../services/color-manager.service';
+import { AddColorsOptions, ColorService } from '../services/color.service';
 
 export type DynamicColorKey =
   | 'background'
@@ -88,210 +88,213 @@ function findDesiredChromaByTone(
   return answer;
 }
 
-export const defaultColors = (
-  colorManagerService: ColorManagerService
-): Partial<Record<DynamicColorKey, Partial<ColorOptions>>> => ({
-  background: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 6 : 98),
-    isBackground: true,
-  },
-  onBackground: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 90 : 10),
-    background: (s) => colorManagerService.get('background').getDynamicColor(),
-    contrastCurve: new ContrastCurve(3, 3, 4.5, 7),
-  },
-  surface: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 6 : 98),
-    isBackground: true,
-  },
-  surfaceDim: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 6 : 87),
-    isBackground: true,
-  },
-  surfaceBright: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 24 : 98),
-    isBackground: true,
-  },
-  surfaceContainerLowest: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 4 : 100),
-    isBackground: true,
-  },
-  surfaceContainerLow: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 10 : 96),
-    isBackground: true,
-  },
-  surfaceContainer: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 12 : 94),
-    isBackground: true,
-  },
-  surfaceContainerHigh: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 17 : 92),
-    isBackground: true,
-  },
-  surfaceContainerHighest: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 22 : 90),
-    isBackground: true,
-  },
-  onSurface: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 90 : 10),
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
-  },
-  surfaceVariant: {
-    palette: (s) => s.getPalette('neutralVariant'),
-    tone: (s) => (s.isDark ? 30 : 90),
-    isBackground: true,
-  },
-  onSurfaceVariant: {
-    palette: (s) => s.getPalette('neutralVariant'),
-    tone: (s) => (s.isDark ? 80 : 30),
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-  },
-  inverseSurface: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 90 : 20),
-  },
-  inverseOnSurface: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 20 : 95),
-    background: (s) =>
-      colorManagerService.get('inverseSurface').getDynamicColor(),
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
-  },
-  outline: {
-    palette: (s) => s.getPalette('neutralVariant'),
-    tone: (s) => (s.isDark ? 60 : 50),
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7),
-  },
-  outlineVariant: {
-    palette: (s) => s.getPalette('neutralVariant'),
-    tone: (s) => (s.isDark ? 30 : 80),
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-  },
-  shadow: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => 0,
-  },
-  scrim: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => 0,
-  },
-  surfaceTint: {
-    palette: (s) => s.getPalette('neutral'),
-    tone: (s) => (s.isDark ? 80 : 40),
-    isBackground: true,
-  },
-  secondaryContainer: {
-    tone: (s) => {
-      const initialTone = s.isDark ? 30 : 90;
-      return findDesiredChromaByTone(
-        s.getPalette('secondary').hue,
-        s.getPalette('secondary').chroma,
-        initialTone,
-        !s.isDark
-      );
+export const defaultColors: AddColorsOptions = (
+  colorService: ColorService
+) => ({
+  fromPalettes: ['primary', 'secondary', 'tertiary'],
+  colors: {
+    background: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 6 : 98),
+      isBackground: true,
     },
-  },
-  onSecondaryContainer: {
-    tone: (s) => {
-      return DynamicColor.foregroundTone(
-        colorManagerService.get('secondaryContainer').getDynamicColor().tone(s),
-        4.5
-      );
+    onBackground: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 90 : 10),
+      background: (s) => colorService.getColor('background').getDynamicColor(),
+      contrastCurve: new ContrastCurve(3, 3, 4.5, 7),
     },
-  },
-  tertiaryContainer: {
-    palette: (s) => s.getPalette('tertiary'),
-    tone: (s) => {
-      const proposedHct = s
-        .getPalette('tertiary')
-        .getHct(s.sourceColorHct.tone);
-      return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+    surface: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 6 : 98),
+      isBackground: true,
     },
-  },
-  onTertiaryContainer: {
-    palette: (s) => s.getPalette('tertiary'),
-    tone: (s) => {
-      return DynamicColor.foregroundTone(
-        colorManagerService.get('tertiaryContainer').getDynamicColor().tone(s),
-        4.5
-      );
+    surfaceDim: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 6 : 87),
+      isBackground: true,
+    },
+    surfaceBright: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 24 : 98),
+      isBackground: true,
+    },
+    surfaceContainerLowest: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 4 : 100),
+      isBackground: true,
+    },
+    surfaceContainerLow: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 10 : 96),
+      isBackground: true,
+    },
+    surfaceContainer: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 12 : 94),
+      isBackground: true,
+    },
+    surfaceContainerHigh: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 17 : 92),
+      isBackground: true,
+    },
+    surfaceContainerHighest: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 22 : 90),
+      isBackground: true,
+    },
+    onSurface: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 90 : 10),
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    },
+    surfaceVariant: {
+      palette: (s) => s.getPalette('neutralVariant'),
+      tone: (s) => (s.isDark ? 30 : 90),
+      isBackground: true,
+    },
+    onSurfaceVariant: {
+      palette: (s) => s.getPalette('neutralVariant'),
+      tone: (s) => (s.isDark ? 80 : 30),
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    },
+    inverseSurface: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 90 : 20),
+    },
+    inverseOnSurface: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 20 : 95),
+      background: (s) =>
+        colorService.getColor('inverseSurface').getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    },
+    outline: {
+      palette: (s) => s.getPalette('neutralVariant'),
+      tone: (s) => (s.isDark ? 60 : 50),
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7),
+    },
+    outlineVariant: {
+      palette: (s) => s.getPalette('neutralVariant'),
+      tone: (s) => (s.isDark ? 30 : 80),
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    },
+    shadow: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => 0,
+    },
+    scrim: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => 0,
+    },
+    surfaceTint: {
+      palette: (s) => s.getPalette('neutral'),
+      tone: (s) => (s.isDark ? 80 : 40),
+      isBackground: true,
+    },
+    secondaryContainer: {
+      tone: (s) => {
+        const initialTone = s.isDark ? 30 : 90;
+        return findDesiredChromaByTone(
+          s.getPalette('secondary').hue,
+          s.getPalette('secondary').chroma,
+          initialTone,
+          !s.isDark
+        );
+      },
+    },
+    onSecondaryContainer: {
+      tone: (s) => {
+        return DynamicColor.foregroundTone(
+          colorService.getColor('secondaryContainer').getDynamicColor().tone(s),
+          4.5
+        );
+      },
+    },
+    tertiaryContainer: {
+      palette: (s) => s.getPalette('tertiary'),
+      tone: (s) => {
+        const proposedHct = s
+          .getPalette('tertiary')
+          .getHct(s.sourceColorHct.tone);
+        return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+      },
+    },
+    onTertiaryContainer: {
+      palette: (s) => s.getPalette('tertiary'),
+      tone: (s) => {
+        return DynamicColor.foregroundTone(
+          colorService.getColor('tertiaryContainer').getDynamicColor().tone(s),
+          4.5
+        );
+      },
+    },
+    error: {
+      palette: (s) => s.getPalette('error'),
+      tone: (s) => (s.isDark ? 80 : 40),
+      isBackground: true,
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          colorService.getColor('errorContainer').getDynamicColor(),
+          colorService.getColor('error').getDynamicColor(),
+          15,
+          'nearer',
+          false
+        ),
+    },
+    onError: {
+      palette: (s) => s.getPalette('error'),
+      tone: (s) => (s.isDark ? 20 : 100),
+      background: (s) => colorService.getColor('error').getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    },
+    errorContainer: {
+      palette: (s) => s.getPalette('error'),
+      tone: (s) => (s.isDark ? 30 : 90),
+      isBackground: true,
+      background: (s) => highestSurface(s, colorService),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          colorService.getColor('errorContainer').getDynamicColor(),
+          colorService.getColor('error').getDynamicColor(),
+          15,
+          'nearer',
+          false
+        ),
+    },
+    onErrorContainer: {
+      palette: (s) => s.getPalette('error'),
+      tone: (s) => (s.isDark ? 90 : 10),
+      background: (s) =>
+        colorService.getColor('errorContainer').getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
     },
-  },
-  error: {
-    palette: (s) => s.getPalette('error'),
-    tone: (s) => (s.isDark ? 80 : 40),
-    isBackground: true,
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-    toneDeltaPair: (s) =>
-      new ToneDeltaPair(
-        colorManagerService.get('errorContainer').getDynamicColor(),
-        colorManagerService.get('error').getDynamicColor(),
-        15,
-        'nearer',
-        false
-      ),
-  },
-  onError: {
-    palette: (s) => s.getPalette('error'),
-    tone: (s) => (s.isDark ? 20 : 100),
-    background: (s) => colorManagerService.get('error').getDynamicColor(),
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
-  },
-  errorContainer: {
-    palette: (s) => s.getPalette('error'),
-    tone: (s) => (s.isDark ? 30 : 90),
-    isBackground: true,
-    background: (s) => highestSurface(s, colorManagerService),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-    toneDeltaPair: (s) =>
-      new ToneDeltaPair(
-        colorManagerService.get('errorContainer').getDynamicColor(),
-        colorManagerService.get('error').getDynamicColor(),
-        15,
-        'nearer',
-        false
-      ),
-  },
-  onErrorContainer: {
-    palette: (s) => s.getPalette('error'),
-    tone: (s) => (s.isDark ? 90 : 10),
-    background: (s) =>
-      colorManagerService.get('errorContainer').getDynamicColor(),
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
-  },
 
-  onTertiaryFixed: {
-    palette: (s) => s.getPalette('tertiary'),
-    tone: (s) => 10.0,
-    background: (s) =>
-      colorManagerService.get('tertiaryFixedDim').getDynamicColor(),
-    secondBackground: (s) =>
-      colorManagerService.get('tertiaryFixed').getDynamicColor(),
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
-  },
-  onTertiaryFixedVariant: {
-    palette: (s) => s.getPalette('tertiary'),
-    tone: (s) => 30.0,
-    background: (s) =>
-      colorManagerService.get('tertiaryFixedDim').getDynamicColor(),
-    secondBackground: (s) =>
-      colorManagerService.get('tertiaryFixed').getDynamicColor(),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    onTertiaryFixed: {
+      palette: (s) => s.getPalette('tertiary'),
+      tone: (s) => 10.0,
+      background: (s) =>
+        colorService.getColor('tertiaryFixedDim').getDynamicColor(),
+      secondBackground: (s) =>
+        colorService.getColor('tertiaryFixed').getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    },
+    onTertiaryFixedVariant: {
+      palette: (s) => s.getPalette('tertiary'),
+      tone: (s) => 30.0,
+      background: (s) =>
+        colorService.getColor('tertiaryFixedDim').getDynamicColor(),
+      secondBackground: (s) =>
+        colorService.getColor('tertiaryFixed').getDynamicColor(),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    },
   },
 });

package/src/color/{color-manager.service.ts → services/color-manager.service.ts}

@@ -1,10 +1,11 @@
-import { ContrastCurve, ToneDeltaPair } from '../material-color-utilities';
-import { DynamicColor } from '../material-color-utilities/dynamic_color';
-import { SchemeEntity } from '../theme/entities/scheme.entity';
+import { ContrastCurve, ToneDeltaPair } from '../../material-color-utilities';
+import { DynamicColor } from '../../material-color-utilities/dynamic_color';
+import { SchemeEntity } from '../../theme/entities/scheme.entity';
 
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-import { SchemeService } from '../theme/services/scheme.service';
-import { DynamicColorKey } from './models/default-color.model';
+import { ColorEntity, ColorOptions } from '../entities/color.entity';
+import { SchemeService } from '../../theme/services/scheme.service';
+import { DynamicColorKey } from '../models/default-color.model';
+import { ColorService } from './color.service';
 
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -12,11 +13,17 @@ function capitalizeFirstLetter(string: string) {
 
 export const highestSurface = (
   s: SchemeEntity,
-  colorManagerService: ColorManagerService
+  colorService: ColorManagerService | ColorService
 ): DynamicColor => {
-  return s.isDark
-    ? colorManagerService.get('surfaceBright').getDynamicColor()
-    : colorManagerService.get('surfaceDim').getDynamicColor();
+  if (colorService instanceof ColorService) {
+    return s.isDark
+      ? colorService.getColor('surfaceBright').getDynamicColor()
+      : colorService.getColor('surfaceDim').getDynamicColor();
+  } else {
+    return s.isDark
+      ? colorService.get('surfaceBright').getDynamicColor()
+      : colorService.get('surfaceDim').getDynamicColor();
+  }
 };
 
 export class ColorManagerService {

package/src/color/{color.service.spec.ts → services/color.service.spec.ts}

@@ -1,5 +1,5 @@
 import { ColorService } from './color.service';
-import { ColorModule } from './color.module';
+import { ColorModule } from '../color.module';
 import { Test } from '@nestjs/testing';
 
 describe('ColorService', () => {

package/src/color/{color.service.ts → services/color.service.ts}

@@ -1,7 +1,15 @@
 import { ColorManagerService } from './color-manager.service';
-import { ColorInterface } from './color.interface';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-import { defaultColors, DynamicColorKey } from './models/default-color.model';
+import { ColorInterface } from '../color.interface';
+import { ColorEntity, ColorOptions } from '../entities';
+
+type AddColors = {
+  colors?: Record<string, Partial<ColorOptions>>;
+  fromPalettes?: string[] | string;
+};
+
+export type AddColorsOptions =
+  | AddColors
+  | ((colorService: ColorService) => AddColors);
 
 export class ColorService implements ColorInterface {
   private readonly colorManagerService: ColorManagerService;
@@ -13,7 +21,7 @@ export class ColorService implements ColorInterface {
     this.colorManagerService = colorManagerService;
   }
 
-  getAllColors() {
+  getColors() {
     return this.colorManagerService.getAll();
   }
 
@@ -27,26 +35,30 @@ export class ColorService implements ColorInterface {
   //   return colors;
   // }
 
-  addBaseColors() {
-    this.colorManagerService.addFromPalette('primary');
-    this.colorManagerService.addFromPalette('secondary');
-    this.colorManagerService.addFromPalette('tertiary');
-
-    const colors = defaultColors(this.colorManagerService);
-    Object.keys(colors).map((key) => {
-      const color: Partial<ColorOptions> | undefined =
-        colors[key as DynamicColorKey];
-      if (!color) return;
-      return this.colorManagerService.createOrUpdate(key, color);
-    });
-  }
-
-  addColor(key: string, color: ColorOptions): ColorEntity {
+  addColor(key: string, color: Partial<ColorOptions>): ColorEntity {
     return this.colorManagerService.createOrUpdate(key, color);
   }
 
-  addColors(colors: Record<string, ColorOptions>): ColorEntity[] {
-    return Object.keys(colors).map((key) => this.addColor(key, colors[key]));
+  addColors(args: AddColorsOptions | AddColorsOptions[]) {
+    const colorsEntity: ColorEntity[] = [];
+    if (!Array.isArray(args)) args = [args];
+    args.forEach((args) => {
+      if (typeof args === 'function') {
+        args = args(this);
+      }
+      if (args.fromPalettes) {
+        if (!Array.isArray(args.fromPalettes))
+          args.fromPalettes = [args.fromPalettes];
+        args.fromPalettes.map((paletteKey) => {
+          this.colorManagerService.addFromPalette(paletteKey);
+        });
+      }
+      if (args.colors) {
+        Object.keys(args.colors).map((key) =>
+          this.addColor(key, args.colors![key])
+        );
+      }
+    });
   }
 
   getColor(key: string): ColorEntity {

package/src/color/services/index.ts

@@ -0,0 +1,2 @@
+export * from './color-manager.service';
+export * from './color.service';

package/src/config/config.interface.ts

@@ -0,0 +1,15 @@
+import { VariantEntity } from '../theme';
+import { AddColorsOptions } from '../color';
+import { PluginAbstract } from '../plugin/plugin.abstract';
+import { AppService } from '../app.service';
+
+export interface ConfigInterface {
+  sourceColor: string;
+  contrastLevel?: 0;
+  isDark?: boolean;
+  variant?: VariantEntity;
+  colors?: AddColorsOptions | AddColorsOptions[];
+  useDefaultColors?: boolean;
+  palettes?: Record<string, string>;
+  plugins?: (new (appService: AppService) => PluginAbstract)[];
+}