@udixio/theme 0.0.1

package/src/lib/material-color-utilities/htc.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A color system built using CAM16 hue and chroma, and L* from
+ * L*a*b*.
+ *
+ * Using L* creates a link between the color system, contrast, and thus
+ * accessibility. Contrast ratio depends on relative luminance, or Y in the XYZ
+ * color space. L*, or perceptual luminance can be calculated from Y.
+ *
+ * Unlike Y, L* is linear to human perception, allowing trivial creation of
+ * accurate color tones.
+ *
+ * Unlike contrast ratio, measuring contrast in L* is linear, and simple to
+ * calculate. A difference of 40 in HCT tone guarantees a contrast ratio >= 3.0,
+ * and a difference of 50 guarantees a contrast ratio >= 4.5.
+ */
+import { ViewingConditions } from '@material/material-color-utilities';
+/**
+ * HCT, hue, chroma, and tone. A color system that provides a perceptually
+ * accurate color measurement system that can also accurately render what colors
+ * will appear as in different lighting environments.
+ */
+export declare class Hct {
+    private argb;
+    /**
+     * @param hue 0 <= hue < 360; invalid values are corrected.
+     * @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
+     *     returned may be lower than the requested chroma. Chroma has a different
+     *     maximum for any given hue and tone.
+     * @param tone 0 <= tone <= 100; invalid values are corrected.
+     * @return HCT representation of a color in default viewing conditions.
+     */
+    internalHue: number;
+    internalChroma: number;
+    internalTone: number;
+    private constructor();
+    /**
+     * A number, in degrees, representing ex. red, orange, yellow, etc.
+     * Ranges from 0 <= hue < 360.
+     */
+    get hue(): number;
+    /**
+     * @param newHue 0 <= newHue < 360; invalid values are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set hue(newHue: number);
+    get chroma(): number;
+    /**
+     * @param newChroma 0 <= newChroma < ?
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set chroma(newChroma: number);
+    /** Lightness. Ranges from 0 to 100. */
+    get tone(): number;
+    /**
+     * @param newTone 0 <= newTone <= 100; invalid valids are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set tone(newTone: number);
+    static from(hue: number, chroma: number, tone: number): Hct;
+    /**
+     * @param argb ARGB representation of a color.
+     * @return HCT representation of a color in default viewing conditions
+     */
+    static fromInt(argb: number): Hct;
+    static isBlue(hue: number): boolean;
+    static isYellow(hue: number): boolean;
+    static isCyan(hue: number): boolean;
+    toInt(): number;
+    /** Sets a property of the Hct object. */
+    setValue(propertyName: string, value: number): void;
+    toString(): string;
+    /**
+     * Translates a color into different [ViewingConditions].
+     *
+     * Colors change appearance. They look different with lights on versus off,
+     * the same color, as in hex code, on white looks different when on black.
+     * This is called color relativity, most famously explicated by Josef Albers
+     * in Interaction of Color.
+     *
+     * In color science, color appearance models can account for this and
+     * calculate the appearance of a color in different settings. HCT is based on
+     * CAM16, a color appearance model, and uses it to make these calculations.
+     *
+     * See [ViewingConditions.make] for parameters affecting color appearance.
+     */
+    inViewingConditions(vc: ViewingConditions): Hct;
+    private setInternalState;
+}

package/src/lib/material-color-utilities/index.d.ts

@@ -0,0 +1,3 @@
+export * from './contrastCurve';
+export * from './dynamic_color';
+export * from './toneDeltaPair';

package/src/lib/material-color-utilities/toneDeltaPair.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DynamicColor } from './dynamic_color.js';
+/**
+ * Describes the different in tone between colors.
+ *
+ * nearer and farther are deprecated. Use DeltaConstraint instead.
+ */
+export type TonePolarity = 'darker' | 'lighter' | 'nearer' | 'farther' | 'relative_darker' | 'relative_lighter';
+/**
+ * Describes how to fulfill a tone delta pair constraint.
+ */
+export type DeltaConstraint = 'exact' | 'nearer' | 'farther';
+/**
+ * Documents a constraint between two DynamicColors, in which their tones must
+ * have a certain distance from each other.
+ *
+ * Prefer a DynamicColor with a background, this is for special cases when
+ * designers want tonal distance, literally contrast, between two colors that
+ * don't have a background / foreground relationship or a contrast guarantee.
+ */
+export declare class ToneDeltaPair {
+    readonly roleA: DynamicColor;
+    readonly roleB: DynamicColor;
+    readonly delta: number;
+    readonly polarity: TonePolarity;
+    readonly stayTogether: boolean;
+    readonly constraint?: DeltaConstraint | undefined;
+    /**
+     * Documents a constraint in tone distance between two DynamicColors.
+     *
+     * The polarity is an adjective that describes "A", compared to "B".
+     *
+     * For instance, ToneDeltaPair(A, B, 15, 'darker', 'exact') states that
+     * A's tone should be exactly 15 darker than B's.
+     *
+     * 'relative_darker' and 'relative_lighter' describes the tone adjustment
+     * relative to the surface color trend (white in light mode; black in dark
+     * mode). For instance, ToneDeltaPair(A, B, 10, 'relative_lighter',
+     * 'farther') states that A should be at least 10 lighter than B in light
+     * mode, and at least 10 darker than B in dark mode.
+     *
+     * @param roleA The first role in a pair.
+     * @param roleB The second role in a pair.
+     * @param delta Required difference between tones. Absolute value, negative
+     * values have undefined behavior.
+     * @param polarity The relative relation between tones of roleA and roleB,
+     * as described above.
+     * @param constraint How to fulfill the tone delta pair constraint.
+     * @param stayTogether Whether these two roles should stay on the same side
+     * of the "awkward zone" (T50-59). This is necessary for certain cases where
+     * one role has two backgrounds.
+     */
+    constructor(roleA: DynamicColor, roleB: DynamicColor, delta: number, polarity: TonePolarity, stayTogether: boolean, constraint?: DeltaConstraint | undefined);
+}

package/src/lib/plugin/index.d.ts

@@ -0,0 +1,3 @@
+export * from './pluginAbstract';
+export * from './plugin.module';
+export * from './pluginApi';

package/src/lib/plugin/plugin.module.d.ts

@@ -0,0 +1,2 @@
+import { Module } from '../app.container';
+export declare const PluginModule: Module;

package/src/lib/plugin/pluginAbstract.d.ts

@@ -0,0 +1,18 @@
+import { API } from '../API';
+export type PluginConstructor<Plugin extends PluginImplAbstract<any>> = new (...args: any) => Plugin;
+export declare abstract class PluginAbstract<Plugin extends PluginImplAbstract<Options>, Options extends object> {
+    abstract readonly dependencies: (new (...args: any) => PluginAbstract<any, any>)[];
+    abstract readonly name: string;
+    options: Options;
+    abstract readonly pluginClass: PluginConstructor<Plugin>;
+    protected pluginInstance: Plugin | undefined;
+    constructor(options: Options);
+    init(api: API): this;
+    getInstance(): Plugin;
+}
+export declare abstract class PluginImplAbstract<Options extends object> {
+    protected api: API;
+    protected options: Options;
+    constructor(api: API, options: Options);
+    abstract onInit(): void;
+}

package/src/lib/plugin/pluginApi.d.ts

@@ -0,0 +1,8 @@
+import { PluginAbstract } from './pluginAbstract';
+import { API } from '../API';
+export declare class PluginApi {
+    private plugins;
+    addPlugin(plugin: PluginAbstract<any, any>): void;
+    loadPlugins(api: API): void;
+    getPlugin<T extends PluginAbstract<any, any>>(plugin: new (...args: any) => T): T;
+}

package/src/lib/plugins/font/font.plugin.d.ts

@@ -0,0 +1,49 @@
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
+export declare enum FontFamily {
+    Expressive = "expressive",
+    Neutral = "neutral"
+}
+export type FontStyle = {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
+    letterSpacing?: number;
+    fontFamily: FontFamily;
+};
+export type FontRole = 'display' | 'headline' | 'title' | 'label' | 'body';
+export type FontSize = 'large' | 'medium' | 'small';
+interface FontPluginOptions {
+    fontFamily?: {
+        expressive?: string[];
+        neutral?: string[];
+    };
+    fontStyles?: Partial<Record<FontRole, Record<FontSize, Partial<FontStyle>>>>;
+}
+export declare class FontPlugin extends PluginAbstract<FontPluginImpl, FontPluginOptions> {
+    dependencies: never[];
+    name: string;
+    pluginClass: typeof FontPluginImpl;
+}
+declare class FontPluginImpl extends PluginImplAbstract<FontPluginOptions> {
+    private _fontFamily;
+    get fontFamily(): {
+        expressive: string[];
+        neutral: string[];
+    };
+    set fontFamily(value: {
+        expressive: string[];
+        neutral: string[];
+    } | undefined);
+    private _fontStyles;
+    get fontStyles(): Record<FontRole, Record<FontSize, FontStyle>>;
+    set fontStyles(value: Record<FontRole, Record<FontSize, FontStyle>> | undefined);
+    getFonts(): {
+        fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+        fontFamily: {
+            expressive: string[];
+            neutral: string[];
+        };
+    };
+    onInit(): void;
+}
+export {};

package/src/lib/plugins/font/index.d.ts

@@ -0,0 +1 @@
+export * from './font.plugin';

package/src/lib/plugins/tailwind/file.d.ts

@@ -0,0 +1,4 @@
+export declare const createOrUpdateFile: (filePath: string, content: string) => void;
+export declare const getFileContent: (filePath: string, searchPattern?: RegExp | string) => string | false | null;
+export declare const replaceFileContent: (filePath: string, searchPattern: RegExp | string, replacement: string) => void;
+export declare const findTailwindCssFile: (startDir: string, searchPattern: string) => string | null;

package/src/lib/plugins/tailwind/index.d.ts

@@ -0,0 +1,3 @@
+export * from './main';
+export * from './plugins-tailwind';
+export * from './tailwind.plugin';

package/src/lib/plugins/tailwind/main.d.ts

@@ -0,0 +1,2 @@
+import plugin from 'tailwindcss/plugin';
+export declare const createTheme: () => ReturnType<typeof plugin.withOptions>;

package/src/lib/plugins/tailwind/plugins-tailwind/font.d.ts

@@ -0,0 +1,3 @@
+import { FontRole, FontSize, FontStyle } from '@udixio/theme';
+import plugin from 'tailwindcss/plugin';
+export declare const font: (fontStyles: Record<FontRole, Record<FontSize, FontStyle>>, responsiveBreakPoints: Record<string, number>) => ReturnType<typeof plugin>;

package/src/lib/plugins/tailwind/plugins-tailwind/index.d.ts

@@ -0,0 +1,2 @@
+export * from './state';
+export * from './themer';

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

@@ -0,0 +1,2 @@
+import plugin from 'tailwindcss/plugin';
+export declare const state: (colorKeys: string[]) => ReturnType<typeof plugin>;

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

@@ -0,0 +1,10 @@
+import { API } from '../../../API';
+export declare const themer: (args: {
+    colors: Record<string, {
+        light: string;
+        dark: string;
+    }>;
+    darkMode: "class" | "media";
+    subThemes?: Record<string, string>;
+    api: API;
+}) => any;

package/src/lib/plugins/tailwind/tailwind.plugin.d.ts

@@ -0,0 +1,18 @@
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
+import { FontPlugin } from '../font';
+import plugin from 'tailwindcss/plugin';
+interface TailwindPluginOptions {
+    darkMode?: 'class' | 'media';
+    responsiveBreakPoints?: Record<string, number>;
+    subThemes?: Record<string, string>;
+}
+export declare class TailwindPlugin extends PluginAbstract<TailwindImplPlugin, TailwindPluginOptions> {
+    dependencies: (typeof FontPlugin)[];
+    name: string;
+    pluginClass: typeof TailwindImplPlugin;
+}
+declare class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+    onInit(): void;
+    load(): ReturnType<typeof plugin.withOptions>;
+}
+export {};

package/src/lib/theme/index.d.ts

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

package/src/lib/theme/scheme.d.ts

@@ -0,0 +1,19 @@
+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 declare class Scheme {
+    readonly options: SchemeOptions;
+    constructor(options: SchemeOptions);
+    get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | string;
+    get contrastLevel(): number;
+    get isDark(): boolean;
+    get sourceColorHct(): Hct;
+    getPalette(key: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'neutralVariant' | 'error' | string): TonalPalette;
+}

package/src/lib/theme/scheme.manager.d.ts

@@ -0,0 +1,30 @@
+import { Scheme, SchemeOptions } from './scheme';
+import { 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 declare class SchemeManager {
+    private schemeEntity?;
+    private options?;
+    createOrUpdate(options: Partial<SchemeServiceOptions>): void;
+    get(): Scheme;
+}
+export {};

package/src/lib/theme/theme.api.d.ts

@@ -0,0 +1,22 @@
+import { SchemeManager, SchemeServiceOptions } from './scheme.manager';
+import { VariantManager } from './variant.manager';
+import { Variant } from './variant';
+type ThemeOptions = Omit<SchemeServiceOptions, 'palettes' | 'sourcesColorHex'> & {
+    sourceColorHex: string;
+};
+export declare class ThemeApi {
+    private readonly schemeManager;
+    private readonly variantManager;
+    constructor({ schemeManager, variantManager, }: {
+        schemeManager: SchemeManager;
+        variantManager: VariantManager;
+    });
+    create(options: ThemeOptions & {
+        variant: Variant;
+    }): void;
+    update(options: Partial<ThemeOptions> & {
+        variant?: Variant;
+    }): void;
+    addCustomPalette(key: string, colorHex: string): void;
+}
+export {};

package/src/lib/theme/theme.module.d.ts

@@ -0,0 +1,2 @@
+import { Module } from '../app.container';
+export declare const ThemeModule: Module;

package/src/lib/theme/variant.d.ts

@@ -0,0 +1,35 @@
+import { TonalPalette } from '@material/material-color-utilities';
+import { Hct } from '../material-color-utilities/htc';
+import { AddColors } from '../color';
+export declare const getPiecewiseHue: (sourceColorHct: Hct, hueBreakpoints: number[], hues: number[]) => number;
+export declare const getRotatedHue: (sourceColorHct: Hct, hueBreakpoints: number[], rotations: number[]) => number;
+export declare class Variant {
+    palettes: Record<string, (args: {
+        sourceColorHct: Hct;
+        isDark: boolean;
+    }) => TonalPalette>;
+    name: string;
+    customPalettes?: ((args: {
+        isDark: boolean;
+        sourceColorHct: Hct;
+        colorHct: Hct;
+    }) => TonalPalette) | undefined;
+    /** TODO
+     * Defines color modifications through variation.
+     * Allows customization of specific colors in the theme.
+     */
+    colors?: AddColors['colors'];
+    constructor(palettes: Record<string, (args: {
+        sourceColorHct: Hct;
+        isDark: boolean;
+    }) => TonalPalette> | undefined, name: string, customPalettes?: ((args: {
+        isDark: boolean;
+        sourceColorHct: Hct;
+        colorHct: Hct;
+    }) => TonalPalette) | undefined, 
+    /** TODO
+     * Defines color modifications through variation.
+     * Allows customization of specific colors in the theme.
+     */
+    colors?: AddColors['colors']);
+}

package/src/lib/theme/variant.manager.d.ts

@@ -0,0 +1,13 @@
+import { SchemeManager } from './scheme.manager';
+import { Variant } from './variant';
+export declare class VariantManager {
+    customPalettes: Record<string, string>;
+    private variantEntity?;
+    private readonly schemeManager;
+    constructor({ schemeManager }: {
+        schemeManager: SchemeManager;
+    });
+    addCustomPalette(key: string, colorHex: string): void;
+    set(variantEntity: Variant): void;
+    private update;
+}

package/src/lib/theme/variants/expressive.variant.d.ts

@@ -0,0 +1,2 @@
+import { Variant } from '../variant';
+export declare const expressiveVariant: Variant;

package/src/lib/theme/variants/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tonal-spot.variant';
+export * from './vibrant.variant';
+export * from './expressive.variant';
+export * from './neutral.variant';

package/src/lib/theme/variants/neutral.variant.d.ts

@@ -0,0 +1,2 @@
+import { Variant } from '../variant';
+export declare const neutralVariant: Variant;

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

@@ -0,0 +1,2 @@
+import { Variant } from '../variant';
+export declare const tonalSpotVariant: Variant;

package/src/lib/theme/variants/vibrant.variant.d.ts

@@ -0,0 +1,2 @@
+import { Variant } from '../variant';
+export declare const vibrantVariant: Variant;