From 544ccde86a46582705f968ee1bab3a194316e673 Mon Sep 17 00:00:00 2001
From: aniket965 <aniket965.as@gmail.com>
Date: Fri, 15 Jul 2022 21:07:12 +0530
Subject: [PATCH] feat: enable different color input

---
 .storybook/main.js             | 18 ++++++++++++++-
 .storybook/preview.js          |  1 +
 src/hooks/useCustomSettings.ts | 17 +++++++-------
 src/index.css                  | 18 +++++++--------
 tailwind.config.js             | 41 ++++++++++++++--------------------
 5 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 69f9b62..5266c9e 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,5 @@
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-
+const path = require('path');
 module.exports = {
   stories: [
     "../src/**/*.stories.mdx",
@@ -24,6 +24,22 @@ module.exports = {
       },
     },
   ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\,css&/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            ident: "postcss",
+            plugins: [require("tailwindcss"), require("autoprefixer")],
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    return config;
+  },
   framework: "@storybook/react",
   resolve: {
     plugins: [new TsconfigPathsPlugin({})],
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 48afd56..a5be96a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,4 @@
+import '../src/index.css'
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
diff --git a/src/hooks/useCustomSettings.ts b/src/hooks/useCustomSettings.ts
index 9e0f72b..84ac4bc 100644
--- a/src/hooks/useCustomSettings.ts
+++ b/src/hooks/useCustomSettings.ts
@@ -9,7 +9,6 @@ import {
   setDefaultSourceToken,
   setDefaultDestToken,
 } from "../state/customSettingsSlice";
-import { formatRGB } from "../utils";
 
 // To set custom chains, tokens, default values passed as props
 export const useCustomSettings = (props: WidgetProps) => {
@@ -54,42 +53,42 @@ export const useCustomSettings = (props: WidgetProps) => {
     customize?.accent &&
       document.documentElement.style.setProperty(
         "--socket-widget-accent-color",
-        formatRGB(customize.accent)
+        customize.accent
       );
     customize?.onAccent &&
       document.documentElement.style.setProperty(
         "--socket-widget-on-accent-color",
-        formatRGB(customize.onAccent)
+        customize.onAccent
       );
     customize?.primary &&
       document.documentElement.style.setProperty(
         "--socket-widget-primary-color",
-        formatRGB(customize.primary)
+        customize.primary
       );
     customize?.secondary &&
       document.documentElement.style.setProperty(
         "--socket-widget-secondary-color",
-        formatRGB(customize.secondary)
+        customize.secondary
       );
     customize?.text &&
       document.documentElement.style.setProperty(
         "--socket-widget-primary-text-color",
-        formatRGB(customize.text)
+       customize.text
       );
     customize?.secondaryText &&
       document.documentElement.style.setProperty(
         "--socket-widget-secondary-text-color",
-        formatRGB(customize.secondaryText)
+        customize.secondaryText
       );
     customize?.interactive &&
       document.documentElement.style.setProperty(
         "--socket-widget-interactive",
-        formatRGB(customize.interactive)
+        customize.interactive
       );
     customize?.onInteractive &&
       document.documentElement.style.setProperty(
         "--socket-widget-on-interactive",
-        formatRGB(customize.onInteractive)
+        customize.onInteractive
       );
   }, [customize]);
 };
diff --git a/src/index.css b/src/index.css
index 5e4d03a..43542ae 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,14 +15,14 @@ input[type="number"] {
 
 @layer base {
   :root {
-    --socket-widget-accent-color: 239, 51, 116;
-    --socket-widget-on-accent-color: 255, 255, 255;
-    --socket-widget-primary-color: 255, 255, 255;
-    --socket-widget-secondary-color: 241, 245, 249;
-    --socket-widget-primary-text-color: 0, 0, 0;
-    --socket-widget-secondary-text-color: 68, 68, 68;
-    --socket-widget-outline-color: 208, 208, 208;
-    --socket-widget-interactive: 241, 245, 249;
-    --socket-widget-on-interactive: 10,10,10;
+    --socket-widget-accent-color: rgb(239, 51, 116);
+    --socket-widget-on-accent-color: rgb(255, 255, 255);
+    --socket-widget-primary-color: rgb(255, 255, 255);
+    --socket-widget-secondary-color: rgb(241, 245, 249);
+    --socket-widget-primary-text-color: rgb(0, 0, 0);
+    --socket-widget-secondary-text-color: rgb(68, 68, 68);
+    --socket-widget-outline-color: rgb(208, 208, 208);
+    --socket-widget-interactive: rgb(241, 245, 249);
+    --socket-widget-on-interactive: rgb(10,10,10);
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 2d43e4c..43d9c81 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined)
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    else return `rgb(var(${variableName}))`;
-  };
-}
 
 module.exports = {
   enabled: process.env.NODE_ENV === "publish",
@@ -15,31 +8,31 @@ module.exports = {
     extend: {
       textColor: {
         widget: {
-          accent: withOpacity("--socket-widget-accent-color"),
-          onAccent: withOpacity("--socket-widget-on-accent-color"),
-          primary: withOpacity("--socket-widget-primary-text-color"),
-          'primary-main': withOpacity("--socket-widget-primary-color"),
-          secondary: withOpacity("--socket-widget-secondary-text-color"),
-          outline: withOpacity("--socket-widget-outline-color"),
-          'on-interactive': withOpacity("--socket-widget-on-interactive")
+          accent: "var(--socket-widget-accent-color)",
+          onAccent: "var(--socket-widget-on-accent-color)",
+          primary: "var(--socket-widget-primary-text-color)",
+          'primary-main':"var(--socket-widget-primary-color)",
+          secondary: "var(--socket-widget-secondary-text-color)",
+          outline: "var(--socket-widget-outline-color)",
+          'on-interactive': "var(--socket-widget-on-interactive)"
         },
       },
       backgroundColor: {
         widget: {
-          accent: withOpacity("--socket-widget-accent-color"),
-          primary: withOpacity("--socket-widget-primary-color"),
-          secondary: withOpacity("--socket-widget-secondary-color"),
-          outline: withOpacity("--socket-widget-outline-color"),
-          interactive: withOpacity('--socket-widget-interactive')
+          accent: "var(--socket-widget-accent-color)",
+          primary: "var(--socket-widget-primary-color)",
+          secondary: "var(--socket-widget-secondary-color)",
+          outline: "var(--socket-widget-outline-color)",
+          interactive: 'var(--socket-widget-interactive)'
         },
       },
       borderColor: {
         widget: {
-          accent: withOpacity("--socket-widget-accent-color"),
-          primary: withOpacity("--socket-widget-primary-color"),
-          secondary: withOpacity("--socket-widget-secondary-color"),
-          "secondary-text": withOpacity("--socket-widget-secondary-text-color"),
-          outline: withOpacity("--socket-widget-outline-color"),
+          accent: "var(--socket-widget-accent-color)",
+          primary:"var(--socket-widget-primary-color)",
+          secondary: "var(--socket-widget-secondary-color)",
+          "secondary-text": "var(--socket-widget-secondary-text-color)",
+          outline: "var(--socket-widget-outline-color)",
         },
       },
       width: {