From 1fc097748a79736e1f1bc0a71e71b543fe2dbec1 Mon Sep 17 00:00:00 2001 From: Oliver Pan <2216991777@qq.com> Date: Mon, 24 Jun 2024 00:35:52 -0500 Subject: [PATCH] refactor: Update color generation logic and fix linting issues --- apps/web/types/app.ts | 119 +++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 54 deletions(-) diff --git a/apps/web/types/app.ts b/apps/web/types/app.ts index 3b53064..dfd569f 100644 --- a/apps/web/types/app.ts +++ b/apps/web/types/app.ts @@ -1,71 +1,82 @@ export enum ColorMode { - HEX = "hex", - RGB = "rgb", - HSL = "hsl", + HEX = 'hex', + RGB = 'rgb', + HSL = 'hsl', } export type RawColor = { - h: number; - s: number; - l: number; - a: number; -}; + h: number + s: number + l: number + a: number +} export type RGB = { - r: number; - g: number; - b: number; -}; + r: number + g: number + b: number +} + +export type ColorNames = string[] + +export type BaseColorTypes = 'primary' | 'secondary' | 'accent' | 'gray' -export type BaseColorTypes = "primary" | "secondary" | "accent" | "gray"; +export type BaseColors = Record -export type BaseColors = Record; +export type ColorOptions = Omit, 'gray'> + +export type GeneratedColors = { + baseColors: { + primary: RawColor + secondary: RawColor + accent: RawColor + } + colorPalettes: ColorPalettes +} export type ColorReadability = { - readability: number; - isReadable: boolean; -}; + readability: number + isReadable: boolean +} export enum CVDType { - DeficiencyProt = "protanomaly and protanopia", - DeficiencyDeuter = "deuteranomaly and deuteranopia", - DeficiencyTrit = "tritanomaly and tritanopia", + DeficiencyProt = 'protanomaly and protanopia', + DeficiencyDeuter = 'deuteranomaly and deuteranopia', + DeficiencyTrit = 'tritanomaly and tritanopia', } -export type ColorValue = - | { - step: number; - color: string; - raw: RawColor; - /** - * Readability is calculated using the WCAG 2.0 formula - * Compares the contrast ratio between the foreground and background colors - */ - readability?: { - foreground: ColorReadability; - background: ColorReadability; - }; - } - | undefined; +export type ColorValue = { + step: number + color: string + raw: RawColor + /** + * Readability is calculated using the WCAG 2.0 formula + * Compares the contrast ratio between the foreground and background colors + */ + readability?: { + foreground: ColorReadability + background: ColorReadability + } +} -export type ColorPalettes = Record; +export type ColorPalettes = Record export type AppCSSVariables = - | "--background" - | "--foreground" - | "--card" - | "--card-foreground" - | "--popover" - | "--popover-foreground" - | "--primary" - | "--primary-foreground" - | "--secondary" - | "--secondary-foreground" - | "--muted" - | "--muted-foreground" - | "--accent" - | "--accent-foreground" - | "--border" - | "--input" - | "--ring" - | "--background-accent"; + | '--background' + | '--foreground' + | '--card' + | '--card-foreground' + | '--popover' + | '--popover-foreground' + | '--primary' + | '--primary-foreground' + | '--secondary' + | '--secondary-foreground' + | '--muted' + | '--muted-foreground' + | '--accent' + | '--accent-foreground' + | '--border' + | '--input' + | '--ring' + | '--background-accent'