Skip to content

Commit db8c4f9

Browse files
chore: theme and code refactor (#5983)
* chore: added pi colors * chore: de-dupe modal height --------- Co-authored-by: gakshita <[email protected]>
1 parent a6cc2c9 commit db8c4f9

File tree

4 files changed

+79
-2
lines changed

4 files changed

+79
-2
lines changed

packages/ui/styles/globals.css

+38
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,19 @@
101101
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
102102
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
103103
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
104+
105+
/* pi */
106+
--color-pi-50: var(--color-background-90);
107+
--color-pi-100: var(--color-background-90);
108+
--color-pi-200: var(--color-primary-200);
109+
--color-pi-300: var(--color-primary-200);
110+
--color-pi-400: var(--color-primary-200);
111+
--color-pi-500: var(--color-primary-200);
112+
--color-pi-600: 151, 150, 246;
113+
--color-pi-700: var(--color-primary-100);
114+
--color-pi-800: 57, 56, 149;
115+
--color-pi-900: 30, 29, 78;
116+
--color-pi-950: 14, 14, 37;
104117
}
105118

106119
[data-theme="light"],
@@ -110,6 +123,19 @@
110123
--color-background-100: 255, 255, 255; /* primary bg */
111124
--color-background-90: 247, 247, 247; /* secondary bg */
112125
--color-background-80: 232, 232, 232; /* tertiary bg */
126+
127+
/* pi */
128+
--color-pi-50: var(--color-background-90);
129+
--color-pi-100: var(--color-background-90);
130+
--color-pi-200: var(--color-primary-200);
131+
--color-pi-300: var(--color-primary-200);
132+
--color-pi-400: var(--color-primary-200);
133+
--color-pi-500: var(--color-primary-200);
134+
--color-pi-600: 151, 150, 246;
135+
--color-pi-700: var(--color-primary-100);
136+
--color-pi-800: 57, 56, 149;
137+
--color-pi-900: 30, 29, 78;
138+
--color-pi-950: 14, 14, 37;
113139
}
114140

115141
[data-theme="light"] {
@@ -200,6 +226,18 @@
200226
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
201227
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
202228
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
229+
/* pi */
230+
--color-pi-50: var(--color-background-90);
231+
--color-pi-100: var(--color-background-90);
232+
--color-pi-200: var(--color-primary-200);
233+
--color-pi-300: var(--color-primary-200);
234+
--color-pi-400: var(--color-primary-200);
235+
--color-pi-500: var(--color-primary-200);
236+
--color-pi-600: 151, 150, 246;
237+
--color-pi-700: var(--color-primary-100);
238+
--color-pi-800: 57, 56, 149;
239+
--color-pi-900: 30, 29, 78;
240+
--color-pi-950: 14, 14, 37;
203241
}
204242

205243
[data-theme="dark"] {

web/core/components/inbox/modals/create-modal/create-root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
286286
{shouldRenderDuplicateModal && (
287287
<div
288288
ref={modalContainerRef}
289-
className="relative flex flex-col gap-2.5 h-full px-3 py-4 rounded-lg shadow-xl bg-pi-50"
289+
className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
290290
style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
291291
>
292292
<DuplicateModalRoot

web/core/components/issues/issue-modal/form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
513513
{shouldRenderDuplicateModal && (
514514
<div
515515
ref={modalContainerRef}
516-
className="relative flex flex-col gap-2.5 h-full px-3 py-4 rounded-lg shadow-xl bg-pi-50"
516+
className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
517517
style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
518518
>
519519
<DuplicateModalRoot

web/styles/globals.css

+39
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,19 @@
120120
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
121121
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
122122
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
123+
124+
/* pi */
125+
--color-pi-50: var(--color-background-90);
126+
--color-pi-100: var(--color-background-90);
127+
--color-pi-200: var(--color-primary-200);
128+
--color-pi-300: var(--color-primary-200);
129+
--color-pi-400: var(--color-primary-200);
130+
--color-pi-500: var(--color-primary-200);
131+
--color-pi-600: 151, 150, 246;
132+
--color-pi-700: var(--color-primary-100);
133+
--color-pi-800: 57, 56, 149;
134+
--color-pi-900: 30, 29, 78;
135+
--color-pi-950: 14, 14, 37;
123136
}
124137

125138
[data-theme="light"],
@@ -129,6 +142,19 @@
129142
--color-background-100: 255, 255, 255; /* primary bg */
130143
--color-background-90: 247, 247, 247; /* secondary bg */
131144
--color-background-80: 232, 232, 232; /* tertiary bg */
145+
146+
/* pi */
147+
--color-pi-50: var(--color-background-90);
148+
--color-pi-100: var(--color-background-90);
149+
--color-pi-200: var(--color-primary-200);
150+
--color-pi-300: var(--color-primary-200);
151+
--color-pi-400: var(--color-primary-200);
152+
--color-pi-500: var(--color-primary-200);
153+
--color-pi-600: 151, 150, 246;
154+
--color-pi-700: var(--color-primary-100);
155+
--color-pi-800: 57, 56, 149;
156+
--color-pi-900: 30, 29, 78;
157+
--color-pi-950: 14, 14, 37;
132158
}
133159

134160
[data-theme="light"] {
@@ -230,6 +256,19 @@
230256
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
231257
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
232258
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
259+
260+
/* pi */
261+
--color-pi-50: var(--color-background-90);
262+
--color-pi-100: var(--color-background-90);
263+
--color-pi-200: var(--color-primary-200);
264+
--color-pi-300: var(--color-primary-200);
265+
--color-pi-400: var(--color-primary-200);
266+
--color-pi-500: var(--color-primary-200);
267+
--color-pi-600: 151, 150, 246;
268+
--color-pi-700: var(--color-primary-100);
269+
--color-pi-800: 57, 56, 149;
270+
--color-pi-900: 30, 29, 78;
271+
--color-pi-950: 14, 14, 37;
233272
}
234273

235274
[data-theme="dark"] {

0 commit comments

Comments
 (0)