@udixio/theme 1.0.0-beta.10

package/src/color/index.ts

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

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

@@ -0,0 +1,300 @@
+import { DislikeAnalyzer, Hct } from '@material/material-color-utilities';
+import { ContrastCurve, ToneDeltaPair } from '../../material-color-utilities';
+import { DynamicColor } from '../../material-color-utilities/dynamic_color';
+import { highestSurface } from '../services/color-manager.service';
+import { AddColorsOptions, ColorService } from '../services/color.service';
+
+export type DynamicColorKey =
+  | 'background'
+  | 'onBackground'
+  | 'surface'
+  | 'surfaceDim'
+  | 'surfaceBright'
+  | 'surfaceContainerLowest'
+  | 'surfaceContainerLow'
+  | 'surfaceContainer'
+  | 'surfaceContainerHigh'
+  | 'surfaceContainerHighest'
+  | 'onSurface'
+  | 'surfaceVariant'
+  | 'onSurfaceVariant'
+  | 'inverseSurface'
+  | 'inverseOnSurface'
+  | 'outline'
+  | 'outlineVariant'
+  | 'shadow'
+  | 'scrim'
+  | 'surfaceTint'
+  | 'primary'
+  | 'onPrimary'
+  | 'primaryContainer'
+  | 'onPrimaryContainer'
+  | 'inversePrimary'
+  | 'secondary'
+  | 'onSecondary'
+  | 'secondaryContainer'
+  | 'onSecondaryContainer'
+  | 'tertiary'
+  | 'onTertiary'
+  | 'tertiaryContainer'
+  | 'onTertiaryContainer'
+  | 'error'
+  | 'onError'
+  | 'errorContainer'
+  | 'onErrorContainer'
+  | 'primaryFixed'
+  | 'primaryFixedDim'
+  | 'onPrimaryFixed'
+  | 'onPrimaryFixedVariant'
+  | 'secondaryFixed'
+  | 'secondaryFixedDim'
+  | 'onSecondaryFixed'
+  | 'onSecondaryFixedVariant'
+  | 'tertiaryFixed'
+  | 'tertiaryFixedDim'
+  | 'onTertiaryFixed'
+  | 'onTertiaryFixedVariant';
+
+function findDesiredChromaByTone(
+  hue: number,
+  chroma: number,
+  tone: number,
+  byDecreasingTone: boolean
+): number {
+  let answer = tone;
+
+  let closestToChroma = Hct.from(hue, chroma, tone);
+  if (closestToChroma.chroma < chroma) {
+    let chromaPeak = closestToChroma.chroma;
+    while (closestToChroma.chroma < chroma) {
+      answer += byDecreasingTone ? -1.0 : 1.0;
+      const potentialSolution = Hct.from(hue, chroma, answer);
+      if (chromaPeak > potentialSolution.chroma) {
+        break;
+      }
+      if (Math.abs(potentialSolution.chroma - chroma) < 0.4) {
+        break;
+      }
+
+      const potentialDelta = Math.abs(potentialSolution.chroma - chroma);
+      const currentDelta = Math.abs(closestToChroma.chroma - chroma);
+      if (potentialDelta < currentDelta) {
+        closestToChroma = potentialSolution;
+      }
+      chromaPeak = Math.max(chromaPeak, potentialSolution.chroma);
+    }
+  }
+
+  return answer;
+}
+
+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,
+    },
+    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),
+    },
+    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, 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),
+    },
+
+    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/services/color-manager.service.ts

@@ -0,0 +1,191 @@
+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 { ColorService } from './color.service';
+
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const highestSurface = (
+  s: SchemeEntity,
+  colorService: ColorManagerService | ColorService
+): DynamicColor => {
+  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 {
+  private colorMap = new Map<string, ColorEntity>();
+  private readonly schemeService: SchemeService;
+  constructor({ schemeService }: { schemeService: SchemeService }) {
+    this.schemeService = schemeService;
+  }
+
+  createOrUpdate(key: string, args: Partial<ColorOptions>): ColorEntity {
+    let colorEntity = this.colorMap.get(key);
+    if (!colorEntity) {
+      const { palette, tone } = args;
+      if (palette && tone) {
+        colorEntity = new ColorEntity(
+          { ...args, palette, tone, name: key },
+          this.schemeService,
+          this
+        );
+        this.colorMap.set(key, colorEntity);
+      } else {
+        throw new Error(`Palette ${key} does not exist`);
+      }
+    } else {
+      colorEntity.update({ ...args, name: key });
+      this.colorMap.set(key, colorEntity);
+    }
+    return colorEntity;
+  }
+
+  public remove(key: string) {
+    return this.colorMap.delete(key);
+  }
+
+  public get(key: string): ColorEntity {
+    const colorEntity = this.colorMap.get(key);
+    if (colorEntity) {
+      return colorEntity;
+    } else {
+      throw new Error(`Color ${key} does not exist`);
+    }
+  }
+
+  public getAll(): ReadonlyMap<string, ColorEntity> {
+    return this.colorMap;
+  }
+
+  addFromPalette(key: string): void {
+    const colorKey = key as DynamicColorKey;
+    const ColorKey = capitalizeFirstLetter(key);
+    const onColorKey = ('on' + ColorKey) as DynamicColorKey;
+    const colorKeyContainer = (colorKey + 'Container') as DynamicColorKey;
+    const onColorKeyContainer = ('on' +
+      ColorKey +
+      'Container') as DynamicColorKey;
+    const inverseColorKey = ('inverse' + ColorKey) as DynamicColorKey;
+    const colorKeyFixed = (colorKey + 'Fixed') as DynamicColorKey;
+    const colorKeyFixedDim = (colorKey + 'FixedDim') as DynamicColorKey;
+    const onColorKeyFixed = ('on' + ColorKey + 'Fixed') as DynamicColorKey;
+    const onColorKeyFixedVariant = ('on' +
+      ColorKey +
+      'FixedVariant') as DynamicColorKey;
+
+    this.createOrUpdate(colorKey, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => {
+        return s.isDark ? 80 : 40;
+      },
+      isBackground: true,
+      background: (s) => highestSurface(s, this),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          this.get(colorKeyContainer).getDynamicColor(),
+          this.get(colorKey).getDynamicColor(),
+          15,
+          'nearer',
+          false
+        ),
+    });
+    this.createOrUpdate(onColorKey, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => {
+        return s.isDark ? 20 : 100;
+      },
+      background: (s) => this.get(colorKey).getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    });
+    this.createOrUpdate(colorKeyContainer, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => {
+        return s.isDark ? 30 : 90;
+      },
+      isBackground: true,
+      background: (s) => highestSurface(s, this),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          this.get(colorKeyContainer).getDynamicColor(),
+          this.get(colorKey).getDynamicColor(),
+          15,
+          'nearer',
+          false
+        ),
+    });
+    this.createOrUpdate(onColorKeyContainer, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => {
+        return s.isDark ? 90 : 10;
+      },
+      background: (s) => this.get(colorKeyContainer).getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    });
+    this.createOrUpdate(inverseColorKey, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => (s.isDark ? 40 : 80),
+      background: (s) => this.get('inverseSurface').getDynamicColor(),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    });
+    this.createOrUpdate(colorKeyFixed, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => 90.0,
+      isBackground: true,
+      background: (s) => highestSurface(s, this),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          this.get(colorKeyFixed).getDynamicColor(),
+          this.get(colorKeyFixedDim).getDynamicColor(),
+          10,
+          'lighter',
+          true
+        ),
+    });
+    this.createOrUpdate(colorKeyFixedDim, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => 80.0,
+      isBackground: true,
+      background: (s) => highestSurface(s, this),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: (s) =>
+        new ToneDeltaPair(
+          this.get(colorKeyFixed).getDynamicColor(),
+          this.get(colorKeyFixedDim).getDynamicColor(),
+          10,
+          'lighter',
+          true
+        ),
+    });
+    this.createOrUpdate(onColorKeyFixed, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => 10.0,
+      background: (s) => this.get(colorKeyFixedDim).getDynamicColor(),
+      secondBackground: (s) => this.get(colorKeyFixed).getDynamicColor(),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    });
+    this.createOrUpdate(onColorKeyFixedVariant, {
+      palette: (s) => s.getPalette(key),
+      tone: (s) => 30.0,
+      background: (s) => this.get(colorKeyFixedDim).getDynamicColor(),
+      secondBackground: (s) => this.get(colorKeyFixed).getDynamicColor(),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    });
+  }
+}

package/src/color/services/color.service.spec.ts

@@ -0,0 +1,28 @@
+import { ColorService } from './color.service';
+import { ColorModule } from '../color.module';
+import { Test } from '@nestjs/testing';
+
+describe('ColorService', () => {
+  let colorService: ColorService;
+
+  beforeEach(async () => {
+    const moduleRef = await Test.createTestingModule({
+      imports: [ColorModule],
+    }).compile();
+
+    colorService = moduleRef.get(ColorService);
+  });
+
+  it('should return an array of cats', async () => {
+    const result = colorService['dynamicColorService']['colorMap'].entries();
+    console.log(result);
+
+    colorService.addBaseColors();
+    // for (const [key, value] of Object.entries(defaultColorModel.colors)) {
+    //   colorService.update(key, value);
+    // }
+
+    console.dir(result, { depth: null });
+    // expect(await catsController.findAll()).toBe(result);
+  });
+});

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 { VariantEntity } from '../theme';
+import { AddColorsOptions } from '../color';
+import { PluginConstructor } from '../plugin/plugin.service';
+
+export interface ConfigInterface {
+  sourceColor: string;
+  contrastLevel?: 0;
+  isDark?: boolean;
+  variant?: VariantEntity;
+  colors?: AddColorsOptions | AddColorsOptions[];
+  useDefaultColors?: boolean;
+  palettes?: Record<string, string>;
+  plugins?: (PluginConstructor | [PluginConstructor, object])[];
+}

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(),
+};