From b4d427ae4b7b843e9bc4ca276c69f101eeb4598c Mon Sep 17 00:00:00 2001 From: Oliver Pan <2216991777@qq.com> Date: Mon, 24 Jun 2024 00:34:36 -0500 Subject: [PATCH] chore: Update color generation logic and fix linting issues --- .../lib/code-gen/generate-figma-url-token.ts | 1 + apps/web/lib/code-gen/generate-rnp-tokens.ts | 119 +++++++++--------- 2 files changed, 61 insertions(+), 59 deletions(-) diff --git a/apps/web/lib/code-gen/generate-figma-url-token.ts b/apps/web/lib/code-gen/generate-figma-url-token.ts index 7e0b19d..d9daedc 100644 --- a/apps/web/lib/code-gen/generate-figma-url-token.ts +++ b/apps/web/lib/code-gen/generate-figma-url-token.ts @@ -1,4 +1,5 @@ import { BaseColors } from "@/types/app"; + import { colorHelper } from "../colorHelper"; async function generateFigmaUrlToken(baseColors: Omit) { diff --git a/apps/web/lib/code-gen/generate-rnp-tokens.ts b/apps/web/lib/code-gen/generate-rnp-tokens.ts index 91434ca..f067aa0 100644 --- a/apps/web/lib/code-gen/generate-rnp-tokens.ts +++ b/apps/web/lib/code-gen/generate-rnp-tokens.ts @@ -1,6 +1,7 @@ import { BaseColorTypes, ColorPalettes } from "@/types/app"; -import { colorStepMap } from "../colorStepMap"; + import { colorHelper } from "../colorHelper"; +import { colorStepMap } from "../colorStepMap"; /* { @@ -54,7 +55,7 @@ export const getColorRgb = ( ): string => { const color = palette.find((color) => color.step === colorStepMap[step]) ?.color; - const { r, g, b } = colorHelper.toRgb(color); + const { b, g, r } = colorHelper.toRgb(color); return `rgb(${r},${g},${b})`; }; @@ -68,35 +69,8 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => { const g = (color: BaseColorTypes, step: number) => getColorRgb(colorPalettes[color], step); const lightTheme: Record = { - primary: g("primary", 6), - onPrimary: g("primary", 0), - primaryContainer: g("primary", 1), - onPrimaryContainer: g("primary", 9), - secondary: g("secondary", 6), - onSecondary: g("secondary", 0), - secondaryContainer: g("secondary", 1), - onSecondaryContainer: g("secondary", 9), - tertiary: g("accent", 6), - onTertiary: g("accent", 0), - tertiaryContainer: g("accent", 1), - onTertiaryContainer: g("accent", 9), - error: "rgb(186, 26, 26)", - onError: "rgb(255, 255, 255)", - errorContainer: "rgb(255, 218, 214)", - onErrorContainer: "rgb(65, 0, 2)", + backdrop: "rgba(51, 47, 55, 0.4)", background: g("gray", 0), - onBackground: g("gray", 10), - surface: g("gray", 0), - onSurface: g("gray", 10), - surfaceVariant: g("gray", 1), - onSurfaceVariant: g("gray", 9), - outline: g("gray", 2), - outlineVariant: g("accent", 3), - shadow: g("gray", 10), - scrim: g("gray", 10), - inverseSurface: g("gray", 9), - inverseOnSurface: g("gray", 1), - inversePrimary: g("primary", 6), elevation: { level0: "transparent", level1: g("gray", 1), @@ -105,40 +79,40 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => { level4: g("gray", 4), level5: g("gray", 5), }, - surfaceDisabled: "rgba(29, 27, 30, 0.12)", + error: "rgb(186, 26, 26)", + errorContainer: "rgb(255, 218, 214)", + inverseOnSurface: g("gray", 1), + inversePrimary: g("primary", 6), + inverseSurface: g("gray", 9), + onBackground: g("gray", 10), + onError: "rgb(255, 255, 255)", + onErrorContainer: "rgb(65, 0, 2)", + onPrimary: g("primary", 0), + onPrimaryContainer: g("primary", 9), + onSecondary: g("secondary", 0), + onSecondaryContainer: g("secondary", 9), + onSurface: g("gray", 10), onSurfaceDisabled: "rgba(29, 27, 30, 0.38)", - backdrop: "rgba(51, 47, 55, 0.4)", - }; - const darkTheme: Record = { + onSurfaceVariant: g("gray", 9), + onTertiary: g("accent", 0), + onTertiaryContainer: g("accent", 9), + outline: g("gray", 2), + outlineVariant: g("accent", 3), primary: g("primary", 6), - onPrimary: g("primary", 0), primaryContainer: g("primary", 1), - onPrimaryContainer: g("primary", 9), + scrim: g("gray", 10), secondary: g("secondary", 6), - onSecondary: g("secondary", 0), secondaryContainer: g("secondary", 1), - onSecondaryContainer: g("secondary", 9), + shadow: g("gray", 10), + surface: g("gray", 0), + surfaceDisabled: "rgba(29, 27, 30, 0.12)", + surfaceVariant: g("gray", 1), tertiary: g("accent", 6), - onTertiary: g("accent", 0), tertiaryContainer: g("accent", 1), - onTertiaryContainer: g("accent", 9), - error: "rgb(186, 26, 26)", - onError: "rgb(255, 255, 255)", - errorContainer: "rgb(255, 218, 214)", - onErrorContainer: "rgb(65, 0, 2)", + }; + const darkTheme: Record = { + backdrop: "rgba(51, 47, 55, 0.4)", background: g("gray", 10), - onBackground: g("gray", 0), - surface: g("gray", 10), - onSurface: g("gray", 0), - surfaceVariant: g("gray", 9), - onSurfaceVariant: g("gray", 1), - outline: g("gray", 8), - outlineVariant: g("accent", 3), - shadow: g("gray", 0), - scrim: g("gray", 0), - inverseSurface: g("gray", 1), - inverseOnSurface: g("gray", 9), - inversePrimary: g("primary", 6), elevation: { level0: "transparent", level1: g("gray", 9), @@ -147,13 +121,40 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => { level4: g("gray", 6), level5: g("gray", 5), }, - surfaceDisabled: "rgba(29, 27, 30, 0.12)", + error: "rgb(186, 26, 26)", + errorContainer: "rgb(255, 218, 214)", + inverseOnSurface: g("gray", 9), + inversePrimary: g("primary", 6), + inverseSurface: g("gray", 1), + onBackground: g("gray", 0), + onError: "rgb(255, 255, 255)", + onErrorContainer: "rgb(65, 0, 2)", + onPrimary: g("primary", 0), + onPrimaryContainer: g("primary", 9), + onSecondary: g("secondary", 0), + onSecondaryContainer: g("secondary", 9), + onSurface: g("gray", 0), onSurfaceDisabled: "rgba(29, 27, 30, 0.38)", - backdrop: "rgba(51, 47, 55, 0.4)", + onSurfaceVariant: g("gray", 1), + onTertiary: g("accent", 0), + onTertiaryContainer: g("accent", 9), + outline: g("gray", 8), + outlineVariant: g("accent", 3), + primary: g("primary", 6), + primaryContainer: g("primary", 1), + scrim: g("gray", 0), + secondary: g("secondary", 6), + secondaryContainer: g("secondary", 1), + shadow: g("gray", 0), + surface: g("gray", 10), + surfaceDisabled: "rgba(29, 27, 30, 0.12)", + surfaceVariant: g("gray", 9), + tertiary: g("accent", 6), + tertiaryContainer: g("accent", 1), }; const tokens = { - light: lightTheme, dark: darkTheme, + light: lightTheme, }; return `export const tokens = ${JSON.stringify(tokens, null, 2)}`;