Skip to content

Commit 14143e6

Browse files
author
chavda-bhavik
committed
fix: Transparant background color
1 parent 3da860f commit 14143e6

File tree

3 files changed

+78
-49
lines changed

3 files changed

+78
-49
lines changed

‎apps/widget/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@handsontable/react": "^14.1.0",
4343
"@impler/client": "workspace:^",
4444
"@impler/shared": "workspace:^",
45+
"@mantine/colors-generator": "^7.17.2",
4546
"@mantine/core": "6.0.21",
4647
"@mantine/dates": "6.0.21",
4748
"@mantine/dropzone": "6.0.21",
@@ -52,6 +53,7 @@
5253
"@storybook/react": "^6.5.13",
5354
"@tanstack/react-query": "^4.14.5",
5455
"axios": "1.6.2",
56+
"chroma-js": "^3.1.2",
5557
"cooltipz-css": "^2.3.0",
5658
"cross-env": "^7.0.3",
5759
"file-saver": "^2.0.5",

‎apps/widget/src/components/Common/Container/Container.tsx

+53-44
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import * as WebFont from 'webfontloader';
22
import { Global } from '@emotion/react';
33
import { MantineProvider } from '@mantine/core';
44
import { Notifications } from '@mantine/notifications';
5+
import { generateColors } from '@mantine/colors-generator';
56
import { useEffect, useState, PropsWithChildren, useMemo } from 'react';
67

78
import { ApiService } from '@api';
89
import { Provider } from '../Provider';
910
import { MessageHandlerDataType } from '@types';
11+
import { ParentWindow, deepMerge } from '@util';
1012
import { WIDGET_TEXTS, isObject } from '@impler/client';
11-
import { generateShades, ParentWindow, deepMerge } from '@util';
1213
import { API_URL, colors, mantineConfig, variables } from '@config';
1314
import { IWidgetShowPayload, WidgetEventTypesEnum } from '@impler/shared';
1415

@@ -47,6 +48,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
4748
if (data.value.accessToken) {
4849
api.setAuthorizationToken(data.value.accessToken);
4950
}
51+
console.log(data.value.primaryColor || colors.primary);
5052
setShowWidget(true);
5153
setSecondaryPayload({
5254
accessToken: data.value.accessToken,
@@ -88,13 +90,18 @@ export function Container({ children }: PropsWithChildren<{}>) {
8890
}
8991

9092
const primaryColor = secondaryPayload.appearance?.primaryColor ?? secondaryPayload.primaryColor ?? colors.primary;
93+
console.log(
94+
primaryColor,
95+
secondaryPayload?.colorScheme,
96+
secondaryPayload.appearance?.widget?.backgroundColor ?? colors.white
97+
);
9198
const primaryButtonConfig = secondaryPayload.appearance?.primaryButtonConfig;
9299
const secondaryButtonConfig = secondaryPayload.appearance?.secondaryButtonConfig;
93100

94101
const primaryColorShades = useMemo(
95102
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
96103
// @ts-ignore
97-
() => generateShades(primaryColor),
104+
() => generateColors(primaryColor),
98105
[primaryColor]
99106
);
100107

@@ -128,54 +135,56 @@ export function Container({ children }: PropsWithChildren<{}>) {
128135
borderRadius: '10px',
129136
},
130137

131-
...(secondaryPayload?.colorScheme && {
132-
':root': {
133-
colorScheme: secondaryPayload.colorScheme,
138+
':root': {
139+
...(secondaryPayload?.colorScheme
140+
? {
141+
colorScheme: secondaryPayload.colorScheme,
142+
}
143+
: {}),
134144

135-
//common
136-
'--border-radius': secondaryPayload.appearance?.borderRadius || '0.25rem',
137-
'--label-color': '#868e96',
138-
'--error-color': '#f03e3e',
139-
'--border-color': colors.lightDeem,
140-
'--background-color': secondaryPayload.appearance?.widget?.backgroundColor ?? colors.white,
145+
//common
146+
'--border-radius': secondaryPayload.appearance?.borderRadius || '0.25rem',
147+
'--label-color': '#868e96',
148+
'--error-color': '#f03e3e',
149+
'--border-color': colors.lightDeem,
150+
'--background-color': secondaryPayload.appearance?.widget?.backgroundColor ?? colors.white,
141151

142-
// stepper
143-
'--stepper-background': '#f1f3f5',
144-
'--stepper-completed-background': colors.success,
145-
'--stepper-progress-background': '#f1f3f5',
146-
'--stepper-icon-color': '#495057',
147-
'--stepper-icon-progress-color': '#495057',
148-
'--stepper-icon-completed-color': colors.white,
149-
'--stepper-border-color': '#f1f3f5',
150-
'--stepper-completed-border-color': colors.success,
151-
'--stepper-progress-border-color': primaryColor,
152-
'--stepper-border-radius': '0px',
153-
'--stepper-color': '#666',
152+
// stepper
153+
'--stepper-background': '#f1f3f5',
154+
'--stepper-completed-background': colors.success,
155+
'--stepper-progress-background': '#f1f3f5',
156+
'--stepper-icon-color': '#495057',
157+
'--stepper-icon-progress-color': '#495057',
158+
'--stepper-icon-completed-color': colors.white,
159+
'--stepper-border-color': '#f1f3f5',
160+
'--stepper-completed-border-color': colors.success,
161+
'--stepper-progress-border-color': primaryColor,
162+
'--stepper-border-radius': '0px',
163+
'--stepper-color': '#666',
154164

155-
// button
165+
// button
156166

157-
//Primary Button Variables
158-
'--button-primary-color': primaryButtonConfig?.textColor ?? colors.white,
159-
'--button-primary-background': primaryButtonConfig?.backgroundColor ?? primaryColor,
160-
'--button-primary-background-hover': primaryButtonConfig?.hoverBackground ?? primaryColorShades?.[6],
161-
'--button-primary-border-color': primaryButtonConfig?.borderColor ?? 'transparent',
162-
'--button-primary-border-hover': primaryButtonConfig?.hoverBorderColor ?? 'transparent',
163-
'--button-primary-shadow': primaryButtonConfig?.buttonShadow ?? 'none',
167+
//Primary Button Variables
168+
'--button-primary-color': primaryButtonConfig?.textColor ?? colors.white,
169+
'--button-primary-background': primaryButtonConfig?.backgroundColor ?? primaryColor,
170+
'--button-primary-background-hover': primaryButtonConfig?.hoverBackground ?? primaryColorShades?.[7],
171+
'--button-primary-border-color': primaryButtonConfig?.borderColor ?? 'transparent',
172+
'--button-primary-border-hover': primaryButtonConfig?.hoverBorderColor ?? 'transparent',
173+
'--button-primary-shadow': primaryButtonConfig?.buttonShadow ?? 'none',
164174

165-
// Secondary Button Variables
166-
'--button-secondary-color': secondaryButtonConfig?.textColor ?? primaryColor,
167-
'--button-secondary-background': secondaryButtonConfig?.backgroundColor ?? colors.white,
168-
'--button-secondary-background-hover': secondaryButtonConfig?.hoverBackground ?? primaryColorShades?.[0],
169-
'--button-secondary-border-color': secondaryButtonConfig?.borderColor ?? primaryColor,
170-
'--button-secondary-border-hover': secondaryButtonConfig?.hoverBorderColor ?? primaryColor,
171-
'--button-secondary-shadow': secondaryButtonConfig?.buttonShadow ?? 'none',
175+
// Secondary Button Variables
176+
'--button-secondary-color': secondaryButtonConfig?.textColor ?? primaryColor,
177+
'--button-secondary-background': secondaryButtonConfig?.backgroundColor ?? colors.white,
178+
'--button-secondary-background-hover': secondaryButtonConfig?.hoverBackground ?? primaryColorShades?.[0],
179+
'--button-secondary-border-color': secondaryButtonConfig?.borderColor ?? primaryColor,
180+
'--button-secondary-border-hover': secondaryButtonConfig?.hoverBorderColor ?? primaryColor,
181+
'--button-secondary-shadow': secondaryButtonConfig?.buttonShadow ?? 'none',
172182

173-
// counts
174-
'--counts-background': '#f1f3f5',
175-
'--counts-border-radius': '2rem',
176-
'--counts-active-background': '#ffffff',
177-
},
178-
}),
183+
// counts
184+
'--counts-background': '#f1f3f5',
185+
'--counts-border-radius': '2rem',
186+
'--counts-active-background': '#ffffff',
187+
},
179188
'.tippy-box[data-theme~="custom"]': {
180189
color: 'black',
181190
backgroundColor: 'white',

‎pnpm-lock.yaml

+23-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)