@udixio/theme 1.3.1 → 2.0.0

package/src/color/configurable-color.ts

@@ -1,67 +0,0 @@
-import { hexFromArgb } from '@material/material-color-utilities';
-import { SchemeManager } from '../theme';
-import { DynamicColor, FromPaletteOptions } from '../material-color-utilities';
-import { ColorManager } from './color.manager';
-
-export type ColorOptions = (
-  | (FromPaletteOptions & { alias?: string })
-  | (Partial<FromPaletteOptions> & {
-      alias: string;
-      palette?: never;
-    })
-) & { name: string };
-
-function argbToRgb(argb: number): { r: number; g: number; b: number } {
-  return {
-    r: (argb >> 16) & 0xff,
-    g: (argb >> 8) & 0xff,
-    b: argb & 0xff,
-  };
-}
-
-export class ConfigurableColor {
-  private dynamicColor: DynamicColor | null = null;
-
-  constructor(
-    private option: ColorOptions,
-    private schemeService: SchemeManager,
-    private colorService: ColorManager,
-  ) {}
-
-  update(args: Partial<ColorOptions & { name: string }>) {
-    this.dynamicColor = null;
-    this.option = { ...this.option, ...args };
-  }
-
-  getHex(): string {
-    return hexFromArgb(this.getArgb());
-  }
-
-  getArgb() {
-    return this.getMaterialColor().getArgb(this.schemeService.get());
-  }
-
-  getRgb() {
-    return argbToRgb(this.getArgb());
-  }
-
-  getName(): string {
-    return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
-  }
-
-  getMaterialColor(): DynamicColor {
-    if ('alias' in this.option) {
-      if (!this.option.alias) {
-        throw new Error('Alias option must be defined');
-      }
-      return this.colorService.get(this.option.alias).getMaterialColor();
-    }
-    if (!this.dynamicColor) {
-      this.dynamicColor = DynamicColor.fromPalette({
-        ...this.option,
-        name: this.getName(),
-      });
-    }
-    return this.dynamicColor;
-  }
-}

package/src/theme/index.ts

@@ -1,7 +0,0 @@
-export * from './theme.module';
-export * from './variants';
-export * from './scheme.manager';
-export * from './scheme';
-export * from './theme.api';
-export * from './variant';
-export * from './variant.manager';

package/src/theme/scheme.manager.ts

@@ -1,100 +0,0 @@
-import { Scheme, SchemeOptions } from './scheme';
-import { argbFromHex, TonalPalette } from '@material/material-color-utilities';
-import { Hct } from '../material-color-utilities/htc';
-
-export type SchemeServiceOptions = Omit<
-  SchemeOptions,
-  'palettes' | 'sourceColorArgb'
-> & {
-  sourcesColorHex: Record<string, string> & { primary?: string };
-  palettes: Record<
-    string,
-    | {
-        sourceColorkey: string;
-        tonalPalette: CustomPaletteFunction;
-      }
-    | {
-        sourceColorkey?: never;
-        tonalPalette: PaletteFunction;
-      }
-  >;
-};
-
-type PaletteFunctionArgs = {
-  isDark: boolean;
-  sourceColorHct: Hct;
-};
-
-export type PaletteFunction = (args: PaletteFunctionArgs) => TonalPalette;
-export type CustomPaletteFunction = (
-  args: PaletteFunctionArgs & {
-    colorHct: Hct;
-  },
-) => TonalPalette;
-
-export class SchemeManager {
-  private schemeEntity?: Scheme;
-  private options?: SchemeServiceOptions;
-
-  createOrUpdate(options: Partial<SchemeServiceOptions>) {
-    this.options = {
-      ...this.options,
-      ...options,
-      sourcesColorHex: {
-        ...this.options?.sourcesColorHex,
-        ...options.sourcesColorHex,
-      },
-      palettes: {
-        ...this.options?.palettes,
-        ...options.palettes,
-      },
-    } as SchemeServiceOptions;
-    const palettes = new Map<string, TonalPalette>();
-
-    if (!this.options.sourcesColorHex.primary) {
-      throw new Error('Primary source color is not set');
-    }
-
-    const sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
-    const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
-
-    if (!this.options.palettes) {
-      return;
-    }
-    for (const [
-      key,
-      { sourceColorkey, tonalPalette: paletteFunction },
-    ] of Object.entries(this.options.palettes)) {
-      let palette: TonalPalette;
-      if (typeof sourceColorkey != 'string') {
-        palette = paletteFunction({
-          sourceColorHct: sourceColorHct,
-          isDark: options.isDark ?? false,
-        });
-      } else {
-        const sourceColorArgb = argbFromHex(
-          this.options.sourcesColorHex[sourceColorkey],
-        );
-        const colorHct: Hct = Hct.fromInt(sourceColorArgb);
-        palette = paletteFunction({
-          sourceColorHct: sourceColorHct,
-          colorHct: colorHct,
-          isDark: options.isDark ?? false,
-        });
-      }
-      palettes.set(key, palette);
-    }
-    this.schemeEntity = new Scheme({
-      ...this.options,
-      palettes: palettes,
-      sourceColorArgb: sourceColorArgb,
-    });
-  }
-
-  get(): Scheme {
-    if (!this.schemeEntity) {
-      throw new Error('Scheme is not created');
-    }
-    return this.schemeEntity;
-  }
-}

package/src/theme/scheme.ts

@@ -1,66 +0,0 @@
-import { TonalPalette } from '@material/material-color-utilities';
-import { Hct } from '../material-color-utilities/htc';
-import { Variant } from './variant';
-
-export interface SchemeOptions {
-  sourceColorArgb: number;
-  contrastLevel: number;
-  isDark: boolean;
-  palettes: Map<string, TonalPalette>;
-  variant: Variant;
-}
-
-export class Scheme {
-  constructor(readonly options: SchemeOptions) {}
-
-  get variant():
-    | 'expressive'
-    | 'neutral'
-    | 'tonalSpot'
-    | 'vibrant'
-    | 'fidelity'
-    | string {
-    return this.options.variant.name;
-  }
-
-  get contrastLevel() {
-    if (!this.options) {
-      throw new Error('Scheme options is not set');
-    }
-    return this.options.contrastLevel;
-  }
-
-  get isDark() {
-    if (!this.options) {
-      throw new Error('Scheme options is not set');
-    }
-    return this.options.isDark;
-  }
-
-  get sourceColorHct() {
-    if (!this.options) {
-      throw new Error('Scheme options is not set');
-    }
-    return Hct.fromInt(this.options.sourceColorArgb);
-  }
-
-  getPalette(
-    key:
-      | 'primary'
-      | 'secondary'
-      | 'tertiary'
-      | 'neutral'
-      | 'neutralVariant'
-      | 'error'
-      | string,
-  ): TonalPalette {
-    if (!this.options) {
-      throw new Error('Scheme options is not set');
-    }
-    const palette = this.options.palettes.get(key);
-    if (!palette) {
-      throw new Error(`Palette ${key} not found`);
-    }
-    return palette;
-  }
-}

package/src/theme/theme.api.ts

@@ -1,82 +0,0 @@
-import { DynamicColor } from '@material/material-color-utilities';
-import { SchemeManager, SchemeServiceOptions } from './scheme.manager';
-import { VariantManager } from './variant.manager';
-import { Variant } from './variant';
-
-type ThemeOptions = Omit<
-  SchemeServiceOptions,
-  'palettes' | 'sourcesColorHex'
-> & { sourceColorHex: string };
-
-const colorPaletteKeyColor = DynamicColor.fromPalette({
-  name: 'primary_palette_key_color',
-  palette: (s) => s.primaryPalette,
-  tone: (s) => s.primaryPalette.keyColor.tone,
-});
-
-export class ThemeApi {
-  private readonly schemeManager: SchemeManager;
-  private readonly variantManager: VariantManager;
-
-  constructor({
-    schemeManager,
-    variantManager,
-  }: {
-    schemeManager: SchemeManager;
-    variantManager: VariantManager;
-  }) {
-    this.schemeManager = schemeManager;
-    this.variantManager = variantManager;
-
-    // this.addPalette({key: "primary", addDefaultColors: true})
-    // this.addPalette({key: "secondary", addDefaultColors: true})
-    // this.addPalette({key: "tertiary", addDefaultColors: true})
-    // this.addPalette({key: "error", palette: TonalPalette.fromHueAndChroma(25.0, 84.0)})
-    // this.addPalette({key: "neutral"})
-    // this.addPalette({key: "neutralVariant"})
-  }
-
-  // addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
-  //   this.themeOptions.palettes.set(key, palette);
-  //   if (addDefaultColors){
-  //     this.colorService.addPalette(key)
-  //   }
-  // }
-
-  // create(args: ThemeOptions): SchemeService {
-  //   return new SchemeService(args, this.colorService)
-  // }
-  //
-  // update(options: Partial<ThemeOptions>): SchemeService {
-  //   Object.assign(this.themeOptions, options);
-  //   return this.theme();
-  // }
-
-  get sourceColorHex() {
-    return this.schemeManager.get().sourceColorHct;
-  }
-
-  create(options: ThemeOptions & { variant: Variant }) {
-    this.schemeManager.createOrUpdate({
-      ...options,
-      sourcesColorHex: { primary: options.sourceColorHex },
-    });
-    this.variantManager.set(options.variant);
-  }
-
-  update(options: Partial<ThemeOptions> & { variant?: Variant }) {
-    const themeOptions: Partial<SchemeServiceOptions> = { ...options };
-    if (options.sourceColorHex)
-      themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
-    this.schemeManager.createOrUpdate(themeOptions);
-    if (options.variant) this.variantManager.set(options.variant);
-  }
-
-  addCustomPalette(key: string, colorHex: string) {
-    this.variantManager.addCustomPalette(key, colorHex);
-  }
-
-  // theme(): SchemeService {
-  //   return new SchemeService(this.themeOptions, this.colorService)
-  // }
-}

package/src/theme/theme.module.ts

@@ -1,11 +0,0 @@
-import { asClass } from 'awilix';
-import { Module } from '../app.container';
-import { SchemeManager } from './scheme.manager';
-import { VariantManager } from './variant.manager';
-import { ThemeApi } from './theme.api';
-
-export const ThemeModule: Module = {
-  schemeManager: asClass(SchemeManager).singleton(),
-  variantManager: asClass(VariantManager).singleton(),
-  themeApi: asClass(ThemeApi).singleton(),
-};

package/src/theme/variant.manager.ts

@@ -1,58 +0,0 @@
-import {
-  CustomPaletteFunction,
-  PaletteFunction,
-  SchemeManager,
-} from './scheme.manager';
-import { Variant } from './variant';
-
-export class VariantManager {
-  public customPalettes: Record<string, string> = {};
-  private variantEntity?: Variant;
-
-  private readonly schemeManager: SchemeManager;
-
-  constructor({ schemeManager }: { schemeManager: SchemeManager }) {
-    this.schemeManager = schemeManager;
-  }
-
-  addCustomPalette(key: string, colorHex: string) {
-    this.customPalettes[key] = colorHex;
-    this.update();
-  }
-
-  set(variantEntity: Variant) {
-    this.variantEntity = variantEntity;
-    this.update();
-  }
-
-  private update() {
-    if (!this.variantEntity) return;
-    const palettes: Record<
-      string,
-      | {
-          sourceColorkey: string;
-          tonalPalette: CustomPaletteFunction;
-        }
-      | {
-          tonalPalette: PaletteFunction;
-        }
-    > = {};
-    Object.keys(this.variantEntity.palettes).forEach((key) => {
-      palettes[key] = { tonalPalette: this.variantEntity!.palettes[key] };
-    });
-
-    const customPalettes = this.variantEntity.customPalettes;
-    if (customPalettes) {
-      Object.keys(this.customPalettes).forEach((key) => {
-        palettes[key] = {
-          sourceColorkey: key,
-          tonalPalette: customPalettes,
-        };
-      });
-    }
-    this.schemeManager.createOrUpdate({
-      sourcesColorHex: this.customPalettes,
-      palettes: palettes,
-    });
-  }
-}

package/src/theme/variant.ts

@@ -1,53 +0,0 @@
-import {
-  sanitizeDegreesDouble,
-  TonalPalette,
-} from '@material/material-color-utilities';
-import { Hct } from '../material-color-utilities/htc';
-import { AddColors } from '../color';
-
-export const getPiecewiseHue = (
-  sourceColorHct: Hct,
-  hueBreakpoints: number[],
-  hues: number[],
-): number => {
-  const size = Math.min(hueBreakpoints.length - 1, hues.length);
-  const sourceHue = sourceColorHct.hue;
-  for (let i = 0; i < size; i++) {
-    if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) {
-      return sanitizeDegreesDouble(hues[i]);
-    }
-  }
-  return sourceHue;
-};
-
-export const getRotatedHue = (
-  sourceColorHct: Hct,
-  hueBreakpoints: number[],
-  rotations: number[],
-): number => {
-  let rotation = getPiecewiseHue(sourceColorHct, hueBreakpoints, rotations);
-  if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
-    rotation = 0;
-  }
-  return sanitizeDegreesDouble(sourceColorHct.hue + rotation);
-};
-
-export class Variant {
-  constructor(
-    public palettes: Record<
-      string,
-      (args: { sourceColorHct: Hct; isDark: boolean }) => TonalPalette
-    > = {},
-    public name: string,
-    public customPalettes?: (args: {
-      isDark: boolean;
-      sourceColorHct: Hct;
-      colorHct: Hct;
-    }) => TonalPalette,
-    /** TODO
-     * Defines color modifications through variation.
-     * Allows customization of specific colors in the theme.
-     */
-    public colors?: AddColors['colors'],
-  ) {}
-}

package/src/theme/variants/fidelity.variant.ts

@@ -1,38 +0,0 @@
-import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
-import { TonalPalette } from '@material/material-color-utilities';
-
-export const fidelityVariant: Variant = {
-  name: 'fidelity',
-  palettes: {
-    primary: ({ sourceColorHct, isDark }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
-    secondary: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(
-        sourceColorHct.hue,
-        sourceColorHct.chroma * 0.5,
-      ),
-    tertiary: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(
-        getRotatedHue(
-          sourceColorHct,
-          [0, 20, 71, 161, 333, 360],
-          [-40, 48, -32, 40, -32],
-        ),
-        sourceColorHct.chroma,
-      ),
-    neutral: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-    neutralVariant: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
-    error: ({ sourceColorHct }) => {
-      const errorHue = getPiecewiseHue(
-        sourceColorHct,
-        [0, 3, 13, 23, 33, 43, 153, 273, 360],
-        [12, 22, 32, 12, 22, 32, 22, 12],
-      );
-      return TonalPalette.fromHueAndChroma(errorHue, 60);
-    },
-  },
-  customPalettes: ({ colorHct , sourceColorHct}) =>
-    TonalPalette.fromHueAndChroma(colorHct.hue, sourceColorHct.chroma),
-};

package/src/theme/variants/tonal-spot.variant.ts

@@ -1,35 +0,0 @@
-import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
-import { TonalPalette } from '@material/material-color-utilities';
-
-export const tonalSpotVariant: Variant = {
-  name: 'tonalSpot',
-  palettes: {
-    primary: ({ sourceColorHct, isDark }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-    secondary: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-    tertiary: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(
-        getRotatedHue(
-          sourceColorHct,
-          [0, 20, 71, 161, 333, 360],
-          [-40, 48, -32, 40, -32],
-        ),
-        28,
-      ),
-    neutral: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-    neutralVariant: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
-    error: ({ sourceColorHct }) => {
-      const errorHue = getPiecewiseHue(
-        sourceColorHct,
-        [0, 3, 13, 23, 33, 43, 153, 273, 360],
-        [12, 22, 32, 12, 22, 32, 22, 12],
-      );
-      return TonalPalette.fromHueAndChroma(errorHue, 60);
-    },
-  },
-  customPalettes: ({ colorHct }) =>
-    TonalPalette.fromHueAndChroma(colorHct.hue, 16),
-};