@udixio/theme 1.0.0-beta.3 → 1.0.0-beta.31

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/models/index.ts

@@ -0,0 +1 @@
+export * from './default-color.model';

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

@@ -1,11 +1,11 @@
-import { Injectable } from '@nestjs/common';
-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);
@@ -13,17 +13,25 @@ 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();
+  }
 };
 
-@Injectable()
 export class ColorManagerService {
   private colorMap = new Map<string, ColorEntity>();
-  constructor(private schemeService: SchemeService) {}
+  private readonly schemeService: SchemeService;
+  constructor({ schemeService }: { schemeService: SchemeService }) {
+    this.schemeService = schemeService;
+  }
 
   createOrUpdate(key: string, args: Partial<ColorOptions>): ColorEntity {
     let colorEntity = this.colorMap.get(key);
@@ -91,7 +99,7 @@ export class ColorManagerService {
         new ToneDeltaPair(
           this.get(colorKeyContainer).getDynamicColor(),
           this.get(colorKey).getDynamicColor(),
-          15,
+          10,
           'nearer',
           false
         ),
@@ -116,7 +124,7 @@ export class ColorManagerService {
         new ToneDeltaPair(
           this.get(colorKeyContainer).getDynamicColor(),
           this.get(colorKey).getDynamicColor(),
-          15,
+          10,
           'nearer',
           false
         ),

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/services/color.service.ts

@@ -0,0 +1,75 @@
+import { ColorManagerService } from './color-manager.service';
+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;
+  constructor({
+    colorManagerService,
+  }: {
+    colorManagerService: ColorManagerService;
+  }) {
+    this.colorManagerService = colorManagerService;
+  }
+
+  getColors() {
+    return this.colorManagerService.getAll();
+  }
+
+  // getColors() {
+  //   const colors: Record<string, string> = {};
+  //
+  //   for (const [key, value] of this.colorManagerService.getAll()) {
+  //     colors[key] = hexFromArgb(value.getArgb(this.schemeService.get()));
+  //   }
+  //
+  //   return colors;
+  // }
+
+  addColor(key: string, color: Partial<ColorOptions>): ColorEntity {
+    return this.colorManagerService.createOrUpdate(key, color);
+  }
+
+  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 {
+    return this.colorManagerService.get(key);
+  }
+
+  removeColor(key: string): boolean {
+    return this.colorManagerService.remove(key);
+  }
+
+  updateColor(key: string, newColor: Partial<ColorOptions>): ColorEntity {
+    return this.colorManagerService.createOrUpdate(key, newColor);
+  }
+}

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,14 @@
+import { AddColorsOptions } from '../color';
+import { VariantEntity } from '../theme';
+import { PluginAbstract } from '../plugin';
+
+export interface ConfigInterface {
+  sourceColor: string;
+  contrastLevel?: number;
+  isDark?: boolean;
+  variant?: VariantEntity;
+  colors?: AddColorsOptions | AddColorsOptions[];
+  useDefaultColors?: boolean;
+  palettes?: Record<string, string>;
+  plugins?: PluginAbstract<any, any>[];
+}

package/src/config/config.module.ts

@@ -0,0 +1,7 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { ConfigService } from './config.service';
+
+export const ConfigModule: Module = {
+  configService: asClass(ConfigService).singleton(),
+};