Skip to content

Commit 11836cc

Browse files
geotrevgeotrev
committed
chore: code review
1 parent 0bcf703 commit 11836cc

File tree

5 files changed

+110
-99
lines changed

5 files changed

+110
-99
lines changed

‎packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -33,35 +33,45 @@ const colorStyles = ({ theme, $alertType }: ThemeProps<DefaultTheme> & IStyledGl
3333
let anchorActiveColor;
3434
let focusVariable;
3535

36-
if (['error', 'success'].includes($alertType)) {
37-
const borderVariable =
38-
$alertType === 'success' ? 'border.successEmphasis' : 'border.dangerEmphasis';
39-
const backgroundVariable =
40-
$alertType === 'success' ? 'background.successEmphasis' : 'background.dangerEmphasis';
41-
const foregroundVariable =
42-
$alertType === 'success' ? 'foreground.success' : 'foreground.danger';
43-
44-
borderColor = getColor({ variable: borderVariable, light: { offset: 100 }, theme });
45-
backgroundColor = getColor({ variable: backgroundVariable, theme });
46-
foregroundColor = getColor({ variable: foregroundVariable, light: { offset: -600 }, theme });
47-
focusVariable =
48-
$alertType === 'success' ? 'foreground.successEmphasis' : 'foreground.dangerEmphasis';
49-
anchorHoverColor = theme.palette.white;
50-
anchorActiveColor = theme.palette.white;
51-
} else {
52-
const borderVariable =
53-
$alertType === 'warning' ? 'border.warningEmphasis' : 'border.primaryEmphasis';
54-
const backgroundVariable =
55-
$alertType === 'warning' ? 'background.warningEmphasis' : 'background.primaryEmphasis';
56-
const foregroundVariable =
57-
$alertType === 'warning' ? 'foreground.warning' : 'foreground.primary';
58-
59-
borderColor = getColor({ variable: borderVariable, light: { offset: -300 }, theme });
60-
backgroundColor = getColor({ variable: backgroundVariable, light: { offset: -400 }, theme });
61-
foregroundColor = getColor({ variable: foregroundVariable, light: { offset: 100 }, theme });
62-
anchorHoverColor = getColor({ variable: foregroundVariable, light: { offset: 200 }, theme });
63-
anchorActiveColor = getColor({ variable: foregroundVariable, light: { offset: 300 }, theme });
64-
focusVariable = foregroundVariable;
36+
switch ($alertType) {
37+
case 'success': {
38+
borderColor = getColor({ variable: 'border.successEmphasis', offset: 100, theme });
39+
backgroundColor = getColor({ variable: 'background.successEmphasis', theme });
40+
foregroundColor = getColor({ variable: 'foreground.success', offset: -600, theme });
41+
anchorHoverColor = theme.palette.white;
42+
anchorActiveColor = theme.palette.white;
43+
focusVariable = 'foreground.successEmphasis';
44+
break;
45+
}
46+
case 'error': {
47+
borderColor = getColor({ variable: 'border.dangerEmphasis', offset: 100, theme });
48+
backgroundColor = getColor({ variable: 'background.dangerEmphasis', theme });
49+
foregroundColor = getColor({ variable: 'foreground.danger', offset: -600, theme });
50+
anchorActiveColor = theme.palette.white;
51+
anchorHoverColor = theme.palette.white;
52+
focusVariable = 'foreground.dangerEmphasis';
53+
break;
54+
}
55+
case 'warning': {
56+
borderColor = getColor({ variable: 'border.warningEmphasis', offset: -300, theme });
57+
backgroundColor = getColor({ variable: 'background.warningEmphasis', offset: -400, theme });
58+
const fgVariable = 'foreground.warning';
59+
foregroundColor = getColor({ variable: fgVariable, offset: 100, theme });
60+
anchorHoverColor = getColor({ variable: fgVariable, offset: 200, theme });
61+
anchorActiveColor = getColor({ variable: fgVariable, offset: 300, theme });
62+
focusVariable = fgVariable;
63+
break;
64+
}
65+
case 'info': {
66+
borderColor = getColor({ variable: 'border.primaryEmphasis', offset: -300, theme });
67+
backgroundColor = getColor({ variable: 'background.primaryEmphasis', offset: -400, theme });
68+
const fgVariable = 'foreground.primary';
69+
foregroundColor = getColor({ variable: fgVariable, offset: 100, theme });
70+
anchorHoverColor = getColor({ variable: fgVariable, offset: 200, theme });
71+
anchorActiveColor = getColor({ variable: fgVariable, offset: 300, theme });
72+
focusVariable = fgVariable;
73+
break;
74+
}
6575
}
6676

6777
// Apply a border without affecting the element's size

‎packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ interface IStyledGlobalAlertButtonProps {
2525
isBasic?: boolean;
2626
}
2727

28-
type OffsetOptions = Record<string, Record<string, ColorParameters['offset']>>;
28+
type OffsetOptions = Record<string, ColorParameters['offset']>;
2929

3030
function colorStyles(
3131
props: IStyledGlobalAlertButtonProps & ThemeProps<DefaultTheme> & IStyledGlobalAlertButtonProps
@@ -45,30 +45,30 @@ function colorStyles(
4545
switch ($alertType) {
4646
case 'success':
4747
bgVariable = 'background.successEmphasis';
48-
offsetOptions = { light: { offset: 200 } };
49-
offsetHoverOptions = { light: { offset: 300 } };
50-
offsetActiveOptions = { light: { offset: 400 } };
48+
offsetOptions = { offset: 200 };
49+
offsetHoverOptions = { offset: 300 };
50+
offsetActiveOptions = { offset: 400 };
5151
focusVariable = 'foreground.successEmphasis';
5252
break;
5353
case 'error':
5454
bgVariable = 'background.dangerEmphasis';
55-
offsetOptions = { light: { offset: 200 } };
56-
offsetHoverOptions = { light: { offset: 300 } };
57-
offsetActiveOptions = { light: { offset: 400 } };
55+
offsetOptions = { offset: 200 };
56+
offsetHoverOptions = { offset: 300 };
57+
offsetActiveOptions = { offset: 400 };
5858
focusVariable = 'foreground.dangerEmphasis';
5959
break;
6060
case 'warning':
6161
bgVariable = 'background.warningEmphasis';
6262
offsetOptions = {};
63-
offsetHoverOptions = { light: { offset: 100 } };
64-
offsetActiveOptions = { light: { offset: 200 } };
63+
offsetHoverOptions = { offset: 100 };
64+
offsetActiveOptions = { offset: 200 };
6565
focusVariable = 'foreground.warning';
6666
break;
6767
case 'info':
6868
bgVariable = 'background.primaryEmphasis';
6969
offsetOptions = {};
70-
offsetHoverOptions = { light: { offset: 100 } };
71-
offsetActiveOptions = { light: { offset: 200 } };
70+
offsetHoverOptions = { offset: 100 };
71+
offsetActiveOptions = { offset: 200 };
7272
focusVariable = 'foreground.primary';
7373
break;
7474
}

‎packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts‎

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,62 @@ export const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledGlobalAlert
3030
let activeForegroundColor;
3131
let focusVariable;
3232

33-
if (['success', 'error'].includes($alertType)) {
34-
const variable = $alertType === 'success' ? 'background.success' : 'background.danger';
35-
focusVariable =
36-
$alertType === 'success' ? 'foreground.successEmphasis' : 'foreground.dangerEmphasis';
37-
38-
hoverBackgroundColor = getColor({ variable, theme, transparency: theme.opacity[100] });
39-
hoverForegroundColor = theme.palette.white;
40-
activeBackgroundColor = getColor({ variable, theme, transparency: theme.opacity[200] });
41-
activeForegroundColor = theme.palette.white;
42-
} else if ($alertType === 'warning') {
43-
const bgVariable = 'background.warningEmphasis';
44-
const foregroundVariable = 'foreground.warningEmphasis';
45-
focusVariable = 'foreground.warning';
46-
47-
hoverBackgroundColor = getColor({
48-
variable: bgVariable,
49-
transparency: theme.opacity[100],
50-
theme
51-
});
52-
hoverForegroundColor = getColor({
53-
variable: foregroundVariable,
54-
light: { offset: 200 },
55-
theme
56-
});
57-
activeBackgroundColor = getColor({
58-
variable: bgVariable,
59-
transparency: theme.opacity[200],
60-
theme
61-
});
62-
activeForegroundColor = getColor({
63-
variable: foregroundVariable,
64-
light: { offset: 300 },
65-
theme
66-
});
67-
} else {
68-
focusVariable = 'foreground.primary';
33+
switch ($alertType) {
34+
case 'success':
35+
hoverBackgroundColor = getColor({
36+
variable: 'background.success',
37+
theme,
38+
transparency: theme.opacity[100]
39+
});
40+
hoverForegroundColor = theme.palette.white;
41+
activeBackgroundColor = getColor({
42+
variable: 'background.success',
43+
theme,
44+
transparency: theme.opacity[200]
45+
});
46+
activeForegroundColor = theme.palette.white;
47+
focusVariable = 'foreground.successEmphasis';
48+
break;
49+
case 'error':
50+
hoverBackgroundColor = getColor({
51+
variable: 'background.danger',
52+
theme,
53+
transparency: theme.opacity[100]
54+
});
55+
hoverForegroundColor = theme.palette.white;
56+
activeBackgroundColor = getColor({
57+
variable: 'background.danger',
58+
theme,
59+
transparency: theme.opacity[200]
60+
});
61+
activeForegroundColor = theme.palette.white;
62+
focusVariable = 'foreground.dangerEmphasis';
63+
break;
64+
case 'warning':
65+
hoverBackgroundColor = getColor({
66+
variable: 'background.warningEmphasis',
67+
transparency: theme.opacity[100],
68+
theme
69+
});
70+
hoverForegroundColor = getColor({
71+
variable: 'foreground.warningEmphasis',
72+
offset: 200,
73+
theme
74+
});
75+
activeBackgroundColor = getColor({
76+
variable: 'background.warningEmphasis',
77+
transparency: theme.opacity[200],
78+
theme
79+
});
80+
activeForegroundColor = getColor({
81+
variable: 'foreground.warningEmphasis',
82+
offset: 300,
83+
theme
84+
});
85+
focusVariable = 'foreground.warning';
86+
break;
87+
default:
88+
focusVariable = 'foreground.primary';
6989
}
7090

7191
return css`

‎packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -44,33 +44,18 @@ const colorStyles = ({
4444

4545
switch ($alertType) {
4646
case 'success':
47-
// green/300
48-
color = getColor({
49-
variable: 'foreground.success',
50-
light: { offset: -400 },
51-
theme
52-
});
47+
color = getColor({ variable: 'foreground.success', offset: -400, theme });
5348
break;
5449
case 'error':
55-
// red/300
56-
color = getColor({
57-
variable: 'foreground.danger',
58-
light: { offset: -400 },
59-
theme
60-
});
50+
color = getColor({ variable: 'foreground.danger', offset: -400, theme });
6151
break;
6252

6353
case 'warning':
64-
// yellow/700
6554
color = getColor({ variable: 'foreground.warning', theme });
6655
break;
6756

6857
case 'info':
69-
// blue/700
70-
color = getColor({
71-
variable: 'foreground.primary',
72-
theme
73-
});
58+
color = getColor({ variable: 'foreground.primary', theme });
7459
break;
7560
}
7661

‎packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,7 @@ const colorStyles = ({
3333
break;
3434

3535
case 'info':
36-
color = getColor({
37-
variable: 'foreground.primary',
38-
light: { offset: 200 },
39-
theme
40-
});
36+
color = getColor({ variable: 'foreground.primary', offset: 200, theme });
4137
break;
4238
}
4339

0 commit comments

Comments
 (0)