@udixio/theme 1.0.0-beta.9 → 1.0.0

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

@@ -1,300 +0,0 @@
-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

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

package/src/color/services/color-manager.service.ts

@@ -1,191 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

package/src/config/config.module.ts

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

package/src/config/config.service.ts

@@ -1,74 +0,0 @@
-import { ConfigInterface } from './config.interface';
-
-import { resolve } from 'path';
-import { defaultColors } from '../color';
-import { VariantModel } from '../theme';
-import { AppService } from '../app.service';
-
-export function defineConfig(configObject: ConfigInterface): ConfigInterface {
-  if (!configObject || typeof configObject !== 'object') {
-    throw new Error('The configuration is missing or not an object');
-  }
-  if (!('sourceColor' in configObject)) {
-    throw new Error('Invalid configuration');
-  }
-  return configObject as ConfigInterface;
-}
-
-export class ConfigService {
-  configPath = './theme.config.ts';
-
-  private appService: AppService;
-
-  constructor({ appService }: { appService: AppService }) {
-    this.appService = appService;
-  }
-
-  public async loadConfig(): Promise<void> {
-    const { themeService, colorService, pluginService } = this.appService;
-    const {
-      sourceColor,
-      contrastLevel = 0,
-      isDark = false,
-      variant = VariantModel.tonalSpot,
-      palettes,
-      colors,
-      useDefaultColors = true,
-      plugins,
-    } = await this.getConfig();
-    themeService.create({
-      contrastLevel: contrastLevel,
-      isDark: isDark,
-      sourceColorHex: sourceColor,
-      variant: variant,
-    });
-    if (palettes) {
-      Object.entries(palettes).forEach(([key, value]) =>
-        themeService.addCustomPalette(key, value)
-      );
-    }
-    if (useDefaultColors) {
-      colorService.addColors(defaultColors);
-    }
-    if (colors) {
-      colorService.addColors(colors);
-    }
-    if (plugins) {
-      plugins.forEach((plugin) => {
-        if (Array.isArray(plugin)) {
-          pluginService.addPlugin(plugin[0], plugin[1]);
-        } else {
-          pluginService.addPlugin(plugin, {});
-        }
-      });
-      pluginService.loadPlugins(this.appService);
-    }
-  }
-
-  private async getConfig(): Promise<ConfigInterface> {
-    const path = resolve(this.configPath);
-    const configImport = await import(path);
-    const config: unknown = configImport.default;
-    return config as ConfigInterface;
-  }
-}

package/src/config/index.ts

@@ -1,2 +0,0 @@
-export * from './config.interface';
-export * from './config.service';