feat: color prop can accept rgb colors (#586)

HashLoader can accept rgb colors Co-authored-by: Roman Ismagilov <[email protected]> Co-authored-by: David Hu <[email protected]>
davidhu2000 · Jun 24, 2024 · 612f89d · 612f89d
1 parent fc6595a
commit 612f89d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/src/helpers/colors.test.ts b/src/helpers/colors.test.ts
@@ -5,6 +5,26 @@ describe("calculateRgba", () => {
  expect(typeof calculateRgba).toEqual("function");
  });
 
+ it("returns the same passed in rgb value with custom opacity in old syntax", () => {
+ expect(calculateRgba("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+ expect(calculateRgba("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+ });
+
+ it("returns the same passed in rgb value with custom opacity in new syntax", () => {
+ expect(calculateRgba("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+ expect(calculateRgba("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+ });
+
+ it("adds passed in opacity to the rgb values in old syntax", () => {
+ expect(calculateRgba("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+ expect(calculateRgba("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+ });
+
+ it("adds passed in opacity to the rgb values in new syntax", () => {
+ expect(calculateRgba("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+ expect(calculateRgba("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+ });
+
  it("converts hash values to rgb", () => {
  expect(calculateRgba("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");
  });

diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts
@@ -15,10 +15,37 @@ enum BasicColors {
  black = "#000000",
  gray = "#808080",
  silver = "#C0C0C0",
- white = "#FFFFFF"
+ white = "#FFFFFF",
 }
 
+const handleRgbColorString = (color: string, opacity: number): string => {
+ // rgb(a)(255 255 255 / 80%)
+ if (color.includes("/")) {
+ return color.replace("rgb(", "rgba(");
+ }
+
+ const rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+ const splittedByCommas = rgbValues.split(",");
+
+ // rgb(a)(255, 255, 255, 0.8)
+ if (splittedByCommas.length === 4) {
+ return color.replace("rgb(", "rgba(");
+ }
+
+ // rgb(a)(255, 255, 255)
+ if (splittedByCommas.length === 3) {
+ return `rgba(${rgbValues}, ${opacity})`;
+ }
+
+ // rgb(a)(255 255 255)
+ return `rgba(${rgbValues} / ${opacity})`;
+};
+
 export const calculateRgba = (color: string, opacity: number): string => {
+ if (color.startsWith("rgb")) {
+ return handleRgbColorString(color, opacity);
+ }
+
  if (Object.keys(BasicColors).includes(color)) {
  color = BasicColors[color as keyof typeof BasicColors];
  }