Avoid converting hex colors to rgb if alpha=1

buildo · Dec 1, 2023 · 2a87623 · 2a87623
1 parent c5dd175
commit 2a87623
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
@@ -10,15 +10,15 @@ import {
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { useTranslation } from "react-i18next";
 import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
-import { ColorToken, colorTokenToRGBA } from "../utils/paletteUtils";
+import { ColorToken, colorTokenToValue } from "../utils/paletteUtils";
 
 export function ColorSelector(props: {
   label: LocalizedString;
   value: ColorToken;
   onChange: (value: ColorToken) => void;
 }) {
   const colors = useConfiguratorStatusContext().theme.colors;
-  const selectedColor = colorTokenToRGBA(colors)(props.value);
+  const selectedColor = colorTokenToValue(colors)(props.value);
   const { t } = useTranslation();
 
   return (

diff --git a/packages/configuration-builder/src/utils/colorUtils.ts b/packages/configuration-builder/src/utils/colorUtils.ts
@@ -100,10 +100,10 @@ export function HexToRGB(hex: HexColor): RGB {
 }
 
 export function withAlpha(color: HexColor, alpha: number) {
-  const rgb = HexToRGB(color);
   if (alpha === 100) {
-    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    return color;
   } else {
+    const rgb = HexToRGB(color);
     return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha / 100})`;
   }
 }
diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -81,13 +81,13 @@ export type ColorToken = {
   alpha: number;
 };
 
-export function colorTokenToRGBA(colors: ThemeConfig["colors"]) {
+export function colorTokenToValue(colors: ThemeConfig["colors"]) {
   return (colorToken: ColorToken): string | undefined => {
     if (colorToken.colorKey === "black") {
       return withAlpha("#000000" as HexColor, colorToken.alpha);
     }
     if (colorToken.colorKey === "white") {
-      return withAlpha("#FFFFFF" as HexColor, colorToken.alpha);
+      return withAlpha("#ffffff" as HexColor, colorToken.alpha);
     }
     const [paletteName, step] = colorToken.colorKey.split("-");
     const keyColor = getPaletteKeyColor(paletteName as PaletteName, colors);

diff --git a/packages/configuration-builder/src/utils/preview.ts b/packages/configuration-builder/src/utils/preview.ts
@@ -1,20 +1,20 @@
 import { BentoTheme } from "@buildo/bento-design-system";
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+import { ColorToken, colorTokenToValue as _colorTokenToValue } from "./paletteUtils";
 
 export function useConfiguredTheme(): BentoTheme & object {
   const { tokens: _tokens, colors } = useConfiguratorStatusContext().theme;
   const tokens = _tokens as Record<string, Record<string, ColorToken>>;
 
-  const colorTokenToRGBA = _colorTokenToRGBA(colors);
+  const colorTokenToValue = _colorTokenToValue(colors);
 
   const theme: BentoTheme & object = Object.keys(tokens).reduce(
     (acc, key) => ({
       ...acc,
       [key]: Object.keys(tokens[key]).reduce(
         (acc2, key2) => ({
           ...acc2,
-          [key2]: colorTokenToRGBA(tokens[key][key2]),
+          [key2]: colorTokenToValue(tokens[key][key2]),
         }),
         {}
       ),

diff --git a/packages/configuration-builder/src/utils/useConfigurationExporter.ts b/packages/configuration-builder/src/utils/useConfigurationExporter.ts
@@ -1,5 +1,5 @@
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+import { ColorToken, colorTokenToValue as _colorTokenToValue } from "./paletteUtils";
 
 function colorTokenToVarName(colorToken: ColorToken): string {
   const tokenPart = `${colorToken.colorKey.replace("-", "")}`;
@@ -11,14 +11,14 @@ function colorTokenToVarName(colorToken: ColorToken): string {
 
 export function useConfigurationExporter(): () => string {
   const { tokens, colors } = useConfiguratorStatusContext().theme;
-  const colorTokenToRGBA = _colorTokenToRGBA(colors);
+  const colorTokenToValue = _colorTokenToValue(colors);
   return () => {
     const prelude = `import { BentoTheme } from "@buildo/bento-design-system";`;
 
     const usedColors: Record<string, string> = {};
     Object.entries(tokens).forEach(([_, tokensSection]) => {
       Object.entries(tokensSection).forEach(([_, colorToken]) => {
-        const rgba = colorTokenToRGBA(colorToken);
+        const rgba = colorTokenToValue(colorToken);
         if (rgba) {
           usedColors[colorTokenToVarName(colorToken)] = rgba;
         }