Skip to content

Commit 2b12c96

Browse files
billyvgbillyvg
committed
refactor theme names to be even more consistent, add input styles
1 parent 5b12a2f commit 2b12c96

File tree

6 files changed

+141
-134
lines changed

6 files changed

+141
-134
lines changed

‎packages/feedback/src/constants.ts

Lines changed: 36 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,46 @@
1-
const LIGHT_BORDER = '1.5px solid rgba(41, 35, 47, 0.13)';
2-
const LIGHT_BACKGROUND_HOVER = '#f6f6f7';
3-
const LIGHT_FOREGROUND = '#2B2233';
4-
5-
const DARK_BACKGROUND_HOVER = '#352f3b';
6-
const DARK_BORDER = '1.5px solid rgba(235, 230, 239, 0.15)';
7-
const DARK_FOREGROUND = '#EBE6EF';
8-
9-
const SUBMIT_FOREGROUND = '#ffffff';
1+
const LIGHT_BACKGROUND = '#ffffff';
2+
const INHERIT = 'inherit';
3+
const LIGHT_THEME = {
4+
fontFamily: "'Helvetica Neue', Arial, sans-serif",
5+
fontSize: '14px',
6+
7+
background: LIGHT_BACKGROUND,
8+
backgroundHover: '#f6f6f7',
9+
foreground: '#2b2233',
10+
border: '1.5px solid rgba(41, 35, 47, 0.13)',
11+
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
12+
13+
success: '#268d75',
14+
error: '#df3338',
15+
16+
submitBackground: 'rgba(88, 74, 192, 1)',
17+
submitBackgroundHover: 'rgba(108, 95, 199, 1)',
18+
submitBorder: 'rgba(108, 95, 199, 1)',
19+
submitForeground: LIGHT_BACKGROUND,
20+
21+
cancelBackground: 'transparent',
22+
cancelBackgroundHover: 'var(--background-hover)',
23+
cancelBorder: 'var(--border)',
24+
cancelForeground: 'var(--foreground)',
25+
26+
inputBackground: INHERIT,
27+
inputForeground: INHERIT,
28+
inputBorder: 'var(--border)',
29+
inputBorderFocus: 'rgba(108, 95, 199, 1)',
30+
};
1031

1132
export const DEFAULT_THEME = {
12-
light: {
13-
fontFamily: "'Helvetica Neue', Arial, sans-serif",
14-
fontSize: '14px',
15-
background: '#ffffff',
16-
backgroundHover: LIGHT_BACKGROUND_HOVER,
17-
18-
submitButtonBackground: 'rgba(88, 74, 192, 1)',
19-
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
20-
submitButtonBorder: 'rgba(108, 95, 199, 1)',
21-
submitButtonForeground: SUBMIT_FOREGROUND,
22-
23-
cancelButtonBackground: 'transparent',
24-
cancelButtonBackgroundHover: LIGHT_BACKGROUND_HOVER,
25-
cancelButtonBorder: LIGHT_BORDER,
26-
cancelButtonForeground: LIGHT_FOREGROUND,
27-
28-
foreground: LIGHT_FOREGROUND,
29-
success: '#268d75',
30-
error: '#df3338',
31-
border: LIGHT_BORDER,
32-
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
33-
},
33+
light: LIGHT_THEME,
3434
dark: {
35-
fontFamily: "'Helvetica Neue', Arial, sans-serif",
36-
fontSize: '14px',
37-
background: '#29232f',
38-
backgroundHover: DARK_BACKGROUND_HOVER,
39-
foreground: DARK_FOREGROUND,
35+
...LIGHT_THEME,
4036

41-
submitButtonBackground: 'rgba(88, 74, 192, 1)',
42-
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
43-
submitButtonBorder: 'rgba(108, 95, 199, 1)',
44-
submitButtonForeground: SUBMIT_FOREGROUND,
45-
46-
cancelButtonBackground: 'transparent',
47-
cancelButtonBackgroundHover: DARK_BACKGROUND_HOVER,
48-
cancelButtonBorder: DARK_BORDER,
49-
cancelButtonForeground: DARK_FOREGROUND,
37+
background: '#29232f',
38+
backgroundHover: '#352f3b',
39+
foreground: '#ebe6ef',
40+
border: '1.5px solid rgba(235, 230, 239, 0.15)',
5041

5142
success: '#2da98c',
5243
error: '#f55459',
53-
border: DARK_BORDER,
54-
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
5544
},
5645
};
5746

‎packages/feedback/src/types/index.ts

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -252,15 +252,56 @@ export interface FeedbackTheme {
252252
*/
253253
error: string;
254254

255-
submitButtonBackground: string;
256-
submitButtonBackgroundHover: string;
257-
submitButtonBorder: string;
258-
submitButtonForeground: string;
259-
260-
cancelButtonBackground: string;
261-
cancelButtonBackgroundHover: string;
262-
cancelButtonBorder: string;
263-
cancelButtonForeground: string;
255+
/**
256+
* Background color for the submit button
257+
*/
258+
submitBackground: string;
259+
/**
260+
* Background color when hovering over the submit button
261+
*/
262+
submitBackgroundHover: string;
263+
/**
264+
* Border style for the submit button
265+
*/
266+
submitBorder: string;
267+
/**
268+
* Foreground color for the submit button
269+
*/
270+
submitForeground: string;
271+
272+
/**
273+
* Background color for the cancel button
274+
*/
275+
cancelBackground: string;
276+
/**
277+
* Background color when hovering over the cancel button
278+
*/
279+
cancelBackgroundHover: string;
280+
/**
281+
* Border style for the cancel button
282+
*/
283+
cancelBorder: string;
284+
/**
285+
* Foreground color for the cancel button
286+
*/
287+
cancelForeground: string;
288+
289+
/**
290+
* Background color for form inputs
291+
*/
292+
inputBackground: string;
293+
/**
294+
* Foreground color for form inputs
295+
*/
296+
inputForeground: string;
297+
/**
298+
* Border styles for form inputs
299+
*/
300+
inputBorder: string;
301+
/**
302+
* Border styles for form inputs when focused
303+
*/
304+
inputBorderFocus: string;
264305
}
265306

266307
export interface FeedbackThemes {

‎packages/feedback/src/util/mergeOptions.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
22

33
/**
4-
*
4+
* Quick and dirty deep merge for the Feedback integration options
55
*/
66
export function mergeOptions(
77
defaultOptions: FeedbackInternalOptions,

‎packages/feedback/src/widget/Actor.css.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export function createActorStyles(d: Document): HTMLStyleElement {
1919
text-decoration: none;
2020
z-index: 9000;
2121
22-
color: var(--foreground-color);
23-
background-color: var(--background-color);
22+
color: var(--foreground);
23+
background-color: var(--background);
2424
border: var(--border);
2525
box-shadow: var(--box-shadow);
2626
opacity: 1;
2727
transition: opacity 0.1s ease-in-out;
2828
}
2929
3030
.widget__actor:hover {
31-
background-color: var(--background-hover-color);
31+
background-color: var(--background-hover);
3232
}
3333
3434
.widget__actor svg {
@@ -46,7 +46,7 @@ export function createActorStyles(d: Document): HTMLStyleElement {
4646
}
4747
4848
.feedback-icon path {
49-
fill: var(--foreground-color);
49+
fill: var(--foreground);
5050
}
5151
`;
5252

‎packages/feedback/src/widget/Dialog.css.ts

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
4040
border: var(--border);
4141
padding: 24px;
4242
border-radius: 20px;
43-
background-color: var(--background-color);
44-
color: var(--fg-color);
43+
background-color: var(--background);
44+
color: var(--foreground);
4545
4646
width: 320px;
4747
max-width: 100%;
@@ -64,7 +64,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
6464
}
6565
6666
.error {
67-
color: var(--error-color);
67+
color: var(--error);
6868
margin-bottom: 16px;
6969
}
7070
@@ -77,7 +77,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
7777
}
7878
7979
.form__error-container {
80-
color: var(--error-color);
80+
color: var(--error);
8181
}
8282
8383
.form__error-container--hidden {
@@ -106,15 +106,17 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
106106
.form__input {
107107
font-family: inherit;
108108
line-height: inherit;
109+
background-color: var(--input-background);
109110
box-sizing: border-box;
110-
border: var(--border);
111+
border: var(--input-border);
111112
border-radius: 6px;
113+
color: var(--input-foreground);
112114
font-size: 14px;
113115
font-weight: 500;
114116
padding: 6px 12px;
115117
}
116118
.form__input:focus {
117-
border-color: rgba(108, 95, 199, 1);
119+
border-color: var(--input-border-focus);
118120
}
119121
120122
.form__input--textarea {
@@ -130,7 +132,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
130132
131133
.btn {
132134
line-height: inherit;
133-
border: var(--cancel-button-border);
135+
border: var(--cancel-border);
134136
border-radius: 6px;
135137
cursor: pointer;
136138
font-size: 14px;
@@ -143,30 +145,30 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
143145
}
144146
145147
.btn--primary {
146-
background-color: var(--submit-button-background);
147-
border-color: var(--submit-button-border);
148-
color: var(--submit-button-foreground);
148+
background-color: var(--submit-background);
149+
border-color: var(--submit-border);
150+
color: var(--submit-foreground);
149151
}
150152
.btn--primary:hover {
151-
background-color: var(--submit-button-background-hover);
153+
background-color: var(--submit-background-hover);
152154
}
153155
154156
.btn--default {
155-
background-color: var(--cancel-button-background);
156-
color: var(--cancel-button-foreground);
157+
background-color: var(--cancel-background);
158+
color: var(--cancel-foreground);
157159
font-weight: 500;
158160
}
159161
.btn--default:hover {
160-
background-color: var(--cancel-button-background-hover);
162+
background-color: var(--cancel-background-hover);
161163
}
162164
163165
.success-message {
164-
background-color: var(--background-color);
166+
background-color: var(--background);
165167
border: var(--border);
166168
border-radius: 12px;
167169
box-shadow: var(--box-shadow);
168170
font-weight: 600;
169-
color: var(--success-color);
171+
color: var(--success);
170172
padding: 12px 24px;
171173
line-height: 25px;
172174
display: grid;
@@ -177,7 +179,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
177179
}
178180
179181
.success-icon path {
180-
fill: var(--success-color);
182+
fill: var(--success);
181183
}
182184
`;
183185

0 commit comments

Comments
 (0)