@udixio/theme 1.0.0-beta.2

package/src/color/entities/color.entity.ts

@@ -0,0 +1,60 @@
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+import { SchemeEntity } from '../../theme/entities/scheme.entity';
+import { DynamicColor } from '../../material-color-utilities/dynamic_color';
+import { ContrastCurve } from '../../material-color-utilities';
+import mergeDeep from 'merge-deep';
+import { SchemeService } from '../../theme/services/scheme.service';
+import { ColorManagerService } from '../color-manager.service';
+
+export interface ColorOptions {
+  palette: (scheme: SchemeEntity) => TonalPalette;
+  tone: (scheme: SchemeEntity) => number;
+  isBackground?: boolean;
+  background?: (scheme: SchemeEntity) => DynamicColor;
+  secondBackground?: (scheme: SchemeEntity) => DynamicColor;
+  contrastCurve?: ContrastCurve;
+  toneDeltaPair?: (scheme: SchemeEntity) => {
+    roleA: DynamicColor;
+    readonly roleB: DynamicColor;
+    readonly delta: number;
+    readonly polarity: 'darker' | 'lighter' | 'nearer' | 'farther';
+    readonly stayTogether: boolean;
+  };
+}
+
+export class ColorEntity {
+  private dynamicColor: DynamicColor | null = null;
+
+  constructor(
+    private option: ColorOptions & { name: string },
+    private schemeService: SchemeService,
+    private colorService: ColorManagerService
+  ) {}
+
+  update(args: Partial<ColorOptions & { name: string }>) {
+    this.dynamicColor = null;
+    this.option = mergeDeep(this.option, args);
+  }
+
+  getHex(): string {
+    return hexFromArgb(this.getArgb());
+  }
+
+  getArgb() {
+    return this.getDynamicColor().getArgb(this.schemeService.get());
+  }
+
+  getName(): string {
+    return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
+  }
+
+  getDynamicColor(): DynamicColor {
+    if (!this.dynamicColor) {
+      this.dynamicColor = DynamicColor.fromPalette({
+        ...this.option,
+        name: this.getName(),
+      });
+    }
+    return this.dynamicColor;
+  }
+}

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

@@ -0,0 +1,297 @@
+import { DislikeAnalyzer, Hct } from '@material/material-color-utilities';
+import { ContrastCurve, ToneDeltaPair } from '../../material-color-utilities';
+import { DynamicColor } from '../../material-color-utilities/dynamic_color';
+import { ColorOptions } from '../entities/color.entity';
+import { ColorManagerService, highestSurface } from '../color-manager.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 = (
+  colorManagerService: ColorManagerService
+): Partial<Record<DynamicColorKey, Partial<Omit<ColorOptions, 'name'>>>> => ({
+  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) => colorManagerService.get('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, colorManagerService),
+    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, colorManagerService),
+    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) =>
+      colorManagerService.get('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, colorManagerService),
+    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, colorManagerService),
+    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(
+        colorManagerService.get('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(
+        colorManagerService.get('tertiaryContainer').getDynamicColor().tone(s),
+        4.5
+      );
+    },
+  },
+  error: {
+    palette: (s) => s.getPalette('error'),
+    tone: (s) => (s.isDark ? 80 : 40),
+    isBackground: true,
+    background: (s) => highestSurface(s, colorManagerService),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    toneDeltaPair: (s) =>
+      new ToneDeltaPair(
+        colorManagerService.get('errorContainer').getDynamicColor(),
+        colorManagerService.get('error').getDynamicColor(),
+        15,
+        'nearer',
+        false
+      ),
+  },
+  onError: {
+    palette: (s) => s.getPalette('error'),
+    tone: (s) => (s.isDark ? 20 : 100),
+    background: (s) => colorManagerService.get('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, colorManagerService),
+    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    toneDeltaPair: (s) =>
+      new ToneDeltaPair(
+        colorManagerService.get('errorContainer').getDynamicColor(),
+        colorManagerService.get('error').getDynamicColor(),
+        15,
+        'nearer',
+        false
+      ),
+  },
+  onErrorContainer: {
+    palette: (s) => s.getPalette('error'),
+    tone: (s) => (s.isDark ? 90 : 10),
+    background: (s) =>
+      colorManagerService.get('errorContainer').getDynamicColor(),
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+  },
+
+  onTertiaryFixed: {
+    palette: (s) => s.getPalette('tertiary'),
+    tone: (s) => 10.0,
+    background: (s) =>
+      colorManagerService.get('tertiaryFixedDim').getDynamicColor(),
+    secondBackground: (s) =>
+      colorManagerService.get('tertiaryFixed').getDynamicColor(),
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+  },
+  onTertiaryFixedVariant: {
+    palette: (s) => s.getPalette('tertiary'),
+    tone: (s) => 30.0,
+    background: (s) =>
+      colorManagerService.get('tertiaryFixedDim').getDynamicColor(),
+    secondBackground: (s) =>
+      colorManagerService.get('tertiaryFixed').getDynamicColor(),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+  },
+});

package/src/index.ts

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

package/src/main.ts

@@ -0,0 +1,11 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+import { AppService } from './app.service';
+
+export async function main(): Promise<[AppService, () => Promise<void>]> {
+  const app = await NestFactory.create(AppModule);
+  const appService = app.get(AppService);
+
+  const close = () => app.close();
+  return [appService, close];
+}

package/src/material-color-utilities/contrastCurve.ts

@@ -0,0 +1,63 @@
+/**
+ * @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 { lerp } from '@material/material-color-utilities';
+
+/**
+ * A class containing a value that changes with the contrast level.
+ *
+ * Usually represents the contrast requirements for a dynamic color on its
+ * background. The four values correspond to values for contrast levels -1.0,
+ * 0.0, 0.5, and 1.0, respectively.
+ */
+export class ContrastCurve {
+  /**
+   * Creates a `ContrastCurve` object.
+   *
+   * @param low Value for contrast level -1.0
+   * @param normal Value for contrast level 0.0
+   * @param medium Value for contrast level 0.5
+   * @param high Value for contrast level 1.0
+   */
+  constructor(
+    readonly low: number,
+    readonly normal: number,
+    readonly medium: number,
+    readonly high: number
+  ) {}
+
+  /**
+   * Returns the value at a given contrast level.
+   *
+   * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
+   *     is the lowest; 1.0 is the highest.
+   * @return The value. For contrast ratios, a number between 1.0 and 21.0.
+   */
+  get(contrastLevel: number): number {
+    if (contrastLevel <= -1.0) {
+      return this.low;
+    } else if (contrastLevel < 0.0) {
+      return lerp(this.low, this.normal, (contrastLevel - -1) / 1);
+    } else if (contrastLevel < 0.5) {
+      return lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5);
+    } else if (contrastLevel < 1.0) {
+      return lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5);
+    } else {
+      return this.high;
+    }
+  }
+}