@udixio/theme 1.0.0-beta.9 → 1.0.0

package/src/main.ts

@@ -1,14 +0,0 @@
-import AppContainer from './app.container';
-import { AppService } from './app.service';
-import { ConfigService } from './config';
-
-export function bootstrap(): AppService {
-  return AppContainer.resolve<AppService>('appService');
-}
-
-export async function bootstrapFromConfig(path?: string): Promise<AppService> {
-  const configService = AppContainer.resolve<ConfigService>('configService');
-  if (path) configService.configPath = path;
-  await configService.loadConfig();
-  return AppContainer.resolve<AppService>('appService');
-}

package/src/plugin/plugin.service.ts

@@ -1,30 +0,0 @@
-import { PluginAbstract } from './plugin.abstract';
-import { AppService } from '../app.service';
-
-export type PluginConstructor = new (
-  appService: AppService,
-  options: any
-) => PluginAbstract;
-
-export class PluginService {
-  private pluginInstances = new Map<string, PluginAbstract>();
-  private pluginConstructors = new Map<string, [PluginConstructor, object]>();
-
-  public addPlugin(plugin: PluginConstructor, config: object) {
-    this.pluginConstructors.set(plugin.name, [plugin, config]);
-  }
-
-  public loadPlugins(appService: AppService) {
-    this.pluginConstructors.forEach(([plugin, option]) => {
-      this.pluginInstances.set(plugin.name, new plugin(appService, option));
-    });
-  }
-
-  public getPlugin<T extends PluginAbstract>(
-    plugin: new (appService: AppService, options: any) => T
-  ): T {
-    const pluginInstance = this.pluginInstances.get(plugin.name);
-    if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
-    return pluginInstance as T;
-  }
-}

package/src/plugins/tailwind/Tailwind.plugin.ts

@@ -1,53 +0,0 @@
-import { PluginAbstract } from '../../plugin/plugin.abstract';
-import { AppService } from '../../app.service';
-import { Theme } from './main';
-import { state } from './plugins-tailwind/state';
-import { themer } from './plugins-tailwind/themer';
-
-interface TailwindPluginOptions {
-  darkMode: 'class' | 'media';
-}
-
-export class TailwindPlugin extends PluginAbstract {
-  constructor(
-    protected appService: AppService,
-    protected options: TailwindPluginOptions
-  ) {
-    super();
-  }
-  static config(options: TailwindPluginOptions): TailwindPluginOptions {
-    return options;
-  }
-  getTheme(): Theme {
-    const colors: Record<
-      string,
-      {
-        light: string;
-        dark: string;
-      }
-    > = {};
-
-    for (const isDark of [false, true]) {
-      this.appService.themeService.update({ isDark: isDark });
-      for (const [key, value] of this.appService.colorService
-        .getColors()
-        .entries()) {
-        const newKey = key
-          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
-          .toLowerCase();
-        colors[newKey] ??= { light: '', dark: '' };
-        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
-      }
-    }
-    console.log(colors);
-
-    return {
-      colors: {},
-      fontFamily: { expressive: [], neutral: [] },
-      plugins: [
-        state(Object.keys(colors)),
-        themer(colors, this.options.darkMode),
-      ],
-    };
-  }
-}

package/src/plugins/tailwind/main.ts

@@ -1,18 +0,0 @@
-import { PluginsConfig } from 'tailwindcss/types/config';
-import { bootstrapFromConfig } from '../../main';
-import { TailwindPlugin } from './Tailwind.plugin';
-
-export type Theme = {
-  colors: Record<string, string>;
-  fontFamily: { expressive: string[]; neutral: string[] };
-  plugins: Partial<PluginsConfig>;
-};
-
-export const createTheme = async (): Promise<Theme> => {
-  const app = await bootstrapFromConfig();
-  const plugin = app.pluginService.getPlugin(TailwindPlugin);
-  if (!plugin) {
-    throw new Error('Tailwind plugin not found');
-  }
-  return plugin.getTheme();
-};

package/src/plugins/tailwind/plugins-tailwind/state.ts

@@ -1,88 +0,0 @@
-// from tailwindcss src/util/flattenColors
-import plugin from 'tailwindcss/plugin';
-import { PluginAPI } from 'tailwindcss/types/config';
-
-type State = {
-  statePrefix: string;
-  disabledStyles: {
-    textOpacity: number;
-    backgroundOpacity: number;
-  };
-  transition: {
-    duration: number;
-  };
-};
-
-type Components = Record<string, Record<string, {}>>;
-
-export const state = (colorkeys: string[]) =>
-  plugin((pluginArgs: PluginAPI) => {
-    addAllNewComponents(
-      pluginArgs,
-      {
-        statePrefix: 'state',
-        disabledStyles: {
-          textOpacity: 0.38,
-          backgroundOpacity: 0.12,
-        },
-        transition: {
-          duration: 150,
-        },
-      },
-      colorkeys
-    );
-  }, {});
-
-const addAllNewComponents = (
-  { addComponents }: PluginAPI,
-  { statePrefix, disabledStyles, transition }: State,
-  colorKeys: string[]
-) => {
-  const newComponents: Components = {};
-
-  for (const isGroup of [false, true]) {
-    const group = isGroup ? 'group-' : '';
-    for (const colorName of colorKeys) {
-      const className = `.${group}${statePrefix}-${colorName}`;
-      newComponents[className] = {
-        [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
-        [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
-        [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
-      };
-      if (transition) {
-        newComponents[className][`@apply transition-colors`] = {};
-        newComponents[className][`@apply duration-${transition.duration}`] = {};
-      }
-      if (disabledStyles) {
-        newComponents[className][
-          `@apply ${group}disabled:text-on-surface/[${disabledStyles.textOpacity}]`
-        ] = {};
-        newComponents[className][
-          `@apply ${group}disabled:bg-on-surface/[${disabledStyles.backgroundOpacity}]`
-        ] = {};
-      }
-    }
-  }
-  for (const colorName of colorKeys) {
-    for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
-      const className = `.${stateName}-${statePrefix}-${colorName}`;
-      if (stateName === 'active' || stateName === 'focus') {
-        newComponents[className] = {
-          [`@apply bg-${colorName}/[0.12]`]: {},
-        };
-      } else if (stateName === 'hover') {
-        newComponents[className] = {
-          [`@apply bg-${colorName}/[0.08]`]: {},
-        };
-      } else if (stateName === 'disabled') {
-        newComponents[className] = {
-          [`@apply text-on-surface/[${disabledStyles.textOpacity}]`]: {},
-        };
-        newComponents[className] = {
-          [`@apply bg-on-surface/[${disabledStyles.backgroundOpacity}]`]: {},
-        };
-      }
-    }
-  }
-  addComponents(newComponents);
-};

package/src/plugins/tailwind/plugins-tailwind/themer.ts

@@ -1,53 +0,0 @@
-export const themer = (
-  colors: Record<
-    string,
-    {
-      light: string;
-      dark: string;
-    }
-  >,
-  darkMode: 'class' | 'media'
-) => {
-  const options: {
-    defaultTheme: {
-      extend: {
-        colors: Record<string, string>;
-      };
-    };
-    themes: [
-      {
-        name: 'darkTheme';
-        selectors?: ['.dark-mode', '[data-theme="dark"]'];
-        mediaQuery?: '@media (prefers-color-scheme: dark)';
-        extend: {
-          colors: Record<string, string>;
-        };
-      }
-    ];
-  } = {
-    defaultTheme: {
-      extend: {
-        colors: {},
-      },
-    },
-    themes: [
-      {
-        name: 'darkTheme',
-        extend: {
-          colors: {},
-        },
-      },
-    ],
-  };
-
-  Object.entries(colors).forEach(([key, value]) => {
-    options.defaultTheme.extend.colors[key] = value.light;
-    options.themes[0].extend.colors[key] = value.dark;
-  });
-  options.themes[0].selectors =
-    darkMode === 'class' ? ['.dark-mode', '[data-theme="dark"]'] : undefined;
-  options.themes[0].mediaQuery =
-    darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined;
-
-  return require('tailwindcss-themer')(options);
-};

package/src/theme/entities/index.ts

@@ -1,2 +0,0 @@
-export * from './scheme.entity';
-export * from './variant.entity';

package/src/theme/entities/variant.entity.ts

@@ -1,39 +0,0 @@
-import {
-  Hct,
-  sanitizeDegreesDouble,
-  TonalPalette,
-} from '@material/material-color-utilities';
-
-export const getRotatedHue = (
-  sourceColor: Hct,
-  hues: number[],
-  rotations: number[]
-): number => {
-  const sourceHue = sourceColor.hue;
-  if (hues.length !== rotations.length) {
-    throw new Error(
-      `mismatch between hue length ${hues.length} & rotations ${rotations.length}`
-    );
-  }
-  if (rotations.length === 1) {
-    return sanitizeDegreesDouble(sourceColor.hue + rotations[0]);
-  }
-  const size = hues.length;
-  for (let i = 0; i <= size - 2; i++) {
-    const thisHue = hues[i];
-    const nextHue = hues[i + 1];
-    if (thisHue < sourceHue && sourceHue < nextHue) {
-      return sanitizeDegreesDouble(sourceHue + rotations[i]);
-    }
-  }
-  // If this statement executes, something is wrong, there should have been a
-  // rotation found using the arrays.
-  return sourceHue;
-};
-
-export class VariantEntity {
-  constructor(
-    public palettes: Record<string, (sourceColorHct: Hct) => TonalPalette> = {},
-    public customPalettes?: (colorHct: Hct) => TonalPalette
-  ) {}
-}

package/src/theme/models/index.ts

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

package/src/theme/models/variant.model.ts

@@ -1,63 +0,0 @@
-import {
-  sanitizeDegreesDouble,
-  TonalPalette,
-} from '@material/material-color-utilities';
-import { getRotatedHue, VariantEntity } from '../entities/variant.entity';
-
-export class VariantModel {
-  static tonalSpot: VariantEntity = {
-    palettes: {
-      primary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0),
-      secondary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
-      tertiary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(
-          sanitizeDegreesDouble(sourceColorHct.hue + 60.0),
-          24.0
-        ),
-      neutral: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0),
-      neutralVariant: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
-    },
-    customPalettes: (colorHct) =>
-      TonalPalette.fromHueAndChroma(colorHct.hue, 16),
-  };
-  static vibrant: VariantEntity = {
-    palettes: {
-      primary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200.0),
-      secondary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(
-          getRotatedHue(sourceColorHct, this.hues, this.secondaryRotations),
-          24.0
-        ),
-      tertiary: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(
-          getRotatedHue(sourceColorHct, this.hues, this.tertiaryRotations),
-          32.0
-        ),
-      neutral: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0),
-      neutralVariant: (sourceColorHct) =>
-        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
-    },
-    customPalettes: (colorHct) =>
-      TonalPalette.fromHueAndChroma(
-        getRotatedHue(colorHct, this.hues, this.secondaryRotations),
-        24.0
-      ),
-  };
-
-  private static readonly hues = [
-    0.0, 41.0, 61.0, 101.0, 131.0, 181.0, 251.0, 301.0, 360.0,
-  ];
-
-  private static readonly secondaryRotations = [
-    18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12.0, 12.0,
-  ];
-  private static readonly tertiaryRotations = [
-    35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0,
-  ];
-}

package/src/theme/services/index.ts

@@ -1,3 +0,0 @@
-export * from './scheme.service';
-export * from './theme.service';
-export * from './variant.service';

package/src/theme/services/variant.service.ts

@@ -1,52 +0,0 @@
-import { SchemeService } from './scheme.service';
-import { VariantEntity } from '../entities/variant.entity';
-import { Hct, TonalPalette } from '@material/material-color-utilities';
-
-export class VariantService {
-  public customPalettes: Record<string, string> = {};
-  private variantEntity?: VariantEntity;
-
-  private readonly schemeService: SchemeService;
-  constructor({ schemeService }: { schemeService: SchemeService }) {
-    this.schemeService = schemeService;
-  }
-
-  addCustomPalette(key: string, colorHex: string) {
-    this.customPalettes[key] = colorHex;
-    this.update();
-  }
-
-  set(variantEntity: VariantEntity) {
-    this.variantEntity = variantEntity;
-    if (!variantEntity.palettes.error) {
-      variantEntity.palettes.error = () =>
-        TonalPalette.fromHueAndChroma(25.0, 84.0);
-    }
-    this.update();
-  }
-  private update() {
-    if (!this.variantEntity) return;
-    const palettes: Record<
-      string,
-      {
-        sourceColorkey?: string;
-        tonalPalette: (sourceColorHct: Hct) => TonalPalette;
-      }
-    > = {};
-    Object.keys(this.variantEntity.palettes).forEach((key) => {
-      palettes[key] = { tonalPalette: this.variantEntity!.palettes[key] };
-    });
-    if (this.variantEntity.customPalettes) {
-      Object.keys(this.customPalettes).forEach((key) => {
-        palettes[key] = {
-          sourceColorkey: key,
-          tonalPalette: this.variantEntity!.customPalettes!,
-        };
-      });
-    }
-    this.schemeService.createOrUpdate({
-      sourcesColorHex: this.customPalettes,
-      palettes: palettes,
-    });
-  }
-}