Crystal Design Color

CDC including an ImageProcessor and a SchemeGenerator

ImageProcessor

Usage

import { ImageProcessor, ImageProcessingType } from "@crystal-design/color";

const imageProcessor = new ImageProcessor();
imageProcessor.process(src).then(() => {
  const image = imageProcessor.getImage();
  const imageColors = imageProcessor.getColors();
  const imageQuantizedColors = imageProcessor.getQuantizedColors();
  const imageScoredColors = imageProcessor.getScoredColors();
});

SchemeGenerator

Usage

import { SchemeGenerator, Variant, Scheme } from "@crystal-design/color";

const Scheme = SchemeGenerator.generate("rgba(1, 136, 180, 1.00)", false, {
  variant: Variant.CONTENT,
  contrastLevel: 0,
  primaryColor: "rgba(1, 136, 180, 1)",
  secondaryColor: "rgba(90, 123, 142, 1)",
  tertiaryColor: "rgba(254, 236, 170, 1)",
  neutralColor: "rgba(116, 120, 123, 1)",
  neutralVariantColor: "rgba(110, 120, 127, 1)",
});

Type

export declare enum Variant {
  MONOCHROME = 0,
  NEUTRAL = 1,
  TONAL_SPOT = 2,
  VIBRANT = 3,
  EXPRESSIVE = 4,
  FIDELITY = 5,
  CONTENT = 6,
  RAINBOW = 7,
  FRUIT_SALAD = 8,
}

export declare interface SchemeOptions {
  variant?: Variant;
  contrastLevel?: number;
  primaryColor?: string;
  secondaryColor?: string;
  tertiaryColor?: string;
  neutralColor?: string;
  neutralVariantColor?: string;
}

export declare interface Scheme {
  //Meta
  sourceColor: string;
  mode: string;
  variant: string;
  contrastLevel: number;
  //Background
  background: string;
  onBackground: string;
  //Surface
  surfaceDim: string;
  surface: string;
  surfaceBright: string;
  surfaceContainerLowest: string;
  surfaceContainerLow: string;
  surfaceContainer: string;
  surfaceContainerHigh: string;
  surfaceContainerHighest: string;
  onSurface: string;
  surfaceVariant: string;
  onSurfaceVariant: string;
  inverseSurface: string;
  inverseOnSurface: string;
  outline: string;
  outlineVariant: string;
  surfaceTint: string;
  //Other
  shadow: string;
  scrim: string;
  //Primary
  primary: string;
  onPrimary: string;
  primaryContainer: string;
  onPrimaryContainer: string;
  inversePrimary: string;
  //Secondary
  secondary: string;
  onSecondary: string;
  secondaryContainer: string;
  onSecondaryContainer: string;
  //Tertiary
  tertiary: string;
  onTertiary: string;
  tertiaryContainer: string;
  onTertiaryContainer: string;
  //Error
  error: string;
  onError: string;
  errorContainer: string;
  onErrorContainer: string;
  //Primary Fixed
  primaryFixed: string;
  primaryFixedDim: string;
  onPrimaryFixed: string;
  onPrimaryFixedVariant: string;
  //Secondary Fixed
  secondaryFixed: string;
  secondaryFixedDim: string;
  onSecondaryFixed: string;
  onSecondaryFixedVariant: string;
  //Tertiary Fixed
  tertiaryFixed: string;
  tertiaryFixedDim: string;
  onTertiaryFixed: string;
  onTertiaryFixedVariant: string;
}