Skip to content

Commit d42724b

Browse files
georgylobkoteodoranemes
georgylobko
and
teodoranemes
authored
chore: Light dark dev pages (#3982)
Co-authored-by: Nemes-Teodora <[email protected]>
1 parent f44f577 commit d42724b

File tree

9 files changed

+304
-659
lines changed

9 files changed

+304
-659
lines changed

‎pages/alert/style-custom-types.page.tsx‎

Lines changed: 63 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import React, { useRef } from 'react';
4-
5-
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
3+
import React from 'react';
64

75
import { Alert as CloudscapeAlert, Button, SpaceBetween } from '~components';
86

@@ -68,12 +66,6 @@ interface CustomAlertProps {
6866
}
6967

7068
function CustomAlert({ children, type, dismissible, action }: CustomAlertProps) {
71-
const mode = useCurrentMode(useRef(document.body));
72-
const background = backgrounds[mode][type];
73-
const borderColor = borderColors[mode][type];
74-
const borderWidth = borderWidths[type];
75-
const color = colors[mode];
76-
const iconColor = iconColors[mode][type];
7769
return (
7870
<CloudscapeAlert
7971
dismissible={dismissible}
@@ -82,26 +74,22 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
8274
i18nStrings={i18nStrings}
8375
style={{
8476
root: {
85-
background,
86-
borderColor,
77+
background: getBackground(type),
78+
borderColor: getBorderColor(type),
8779
borderRadius: '8px',
88-
borderWidth,
89-
color,
80+
borderWidth: getBorderWidth(type),
81+
color: getColor(),
9082
focusRing: {
9183
borderColor: palette.red60,
9284
borderRadius: '4px',
9385
borderWidth: '2px',
9486
},
9587
},
9688
icon: {
97-
color: iconColor,
89+
color: getIconColor(type),
9890
},
9991
dismissButton: {
100-
color: {
101-
default: dismissButtonColors[mode][type].default,
102-
hover: dismissButtonColors[mode][type].hover,
103-
active: dismissButtonColors[mode][type].active,
104-
},
92+
color: getDismissButtonColor(type),
10593
focusRing: {
10694
borderColor: palette.red60,
10795
borderRadius: '4px',
@@ -115,106 +103,72 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
115103
);
116104
}
117105

118-
const backgrounds = {
119-
light: {
120-
info: palette.blue80,
121-
success: palette.green80,
122-
error: palette.red80,
123-
warning: palette.teal90,
124-
},
125-
dark: {
126-
info: palette.blue40,
127-
success: palette.green20,
128-
error: palette.red30,
129-
warning: palette.teal20,
130-
},
131-
};
106+
function getBackground(type: string) {
107+
const backgrounds = {
108+
info: `light-dark(${palette.blue80}, ${palette.blue40})`,
109+
success: `light-dark(${palette.green80}, ${palette.green20})`,
110+
error: `light-dark(${palette.red80}, ${palette.red30})`,
111+
warning: `light-dark(${palette.teal90}, ${palette.teal20})`,
112+
};
113+
return backgrounds[type as keyof typeof backgrounds];
114+
}
132115

133-
const colors = {
134-
light: palette.neutral10,
135-
dark: palette.neutral100,
136-
};
116+
function getColor() {
117+
return `light-dark(${palette.neutral10}, ${palette.neutral100})`;
118+
}
137119

138-
const borderColors = {
139-
light: {
140-
info: palette.neutral80,
141-
success: palette.green80,
142-
error: palette.blue90,
143-
warning: palette.orange80,
144-
},
145-
dark: {
146-
info: palette.neutral20,
147-
success: palette.green30,
148-
error: palette.red60,
149-
warning: palette.orange40,
150-
},
151-
};
120+
function getBorderColor(type: string) {
121+
const borderColors = {
122+
info: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
123+
success: `light-dark(${palette.green80}, ${palette.green30})`,
124+
error: `light-dark(${palette.blue90}, ${palette.red60})`,
125+
warning: `light-dark(${palette.orange80}, ${palette.orange40})`,
126+
};
127+
return borderColors[type as keyof typeof borderColors];
128+
}
152129

153-
const borderWidths = {
154-
info: '4px',
155-
success: '0px',
156-
error: '6px',
157-
warning: '0px',
158-
};
130+
function getBorderWidth(type: string) {
131+
const borderWidths = {
132+
info: '4px',
133+
success: '0px',
134+
error: '6px',
135+
warning: '0px',
136+
};
137+
return borderWidths[type as keyof typeof borderWidths];
138+
}
159139

160-
const iconColors = {
161-
light: {
162-
info: palette.orange80,
163-
success: palette.red60,
164-
error: palette.blue80,
165-
warning: palette.neutral10,
166-
},
167-
dark: {
168-
info: palette.red30,
169-
success: palette.red60,
170-
error: palette.blue40,
171-
warning: palette.neutral90,
172-
},
173-
};
140+
function getIconColor(type: string) {
141+
const iconColors = {
142+
info: `light-dark(${palette.orange80}, ${palette.red30})`,
143+
success: `light-dark(${palette.red60}, ${palette.red60})`,
144+
error: `light-dark(${palette.blue80}, ${palette.blue40})`,
145+
warning: `light-dark(${palette.neutral10}, ${palette.neutral90})`,
146+
};
147+
return iconColors[type as keyof typeof iconColors];
148+
}
174149

175-
const dismissButtonColors = {
176-
light: {
177-
info: {
178-
default: palette.green60,
179-
hover: palette.neutral80,
180-
active: palette.neutral90,
181-
},
182-
success: {
183-
default: palette.green60,
184-
hover: palette.green80,
185-
active: palette.green90,
186-
},
187-
error: {
188-
default: palette.red60,
189-
hover: palette.red60,
190-
active: palette.red80,
191-
},
192-
warning: {
193-
default: palette.orange60,
194-
hover: palette.orange80,
195-
active: palette.orange90,
196-
},
197-
},
198-
dark: {
150+
function getDismissButtonColor(type: string) {
151+
const dismissButtonColors = {
199152
info: {
200-
default: palette.neutral40,
201-
hover: palette.neutral20,
202-
active: palette.neutral10,
153+
default: `light-dark(${palette.green60}, ${palette.neutral40})`,
154+
hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
155+
active: `light-dark(${palette.neutral90}, ${palette.neutral10})`,
203156
},
204157
success: {
205-
default: palette.green30,
206-
hover: palette.green20,
207-
active: palette.green10,
158+
default: `light-dark(${palette.green60}, ${palette.green30})`,
159+
hover: `light-dark(${palette.green80}, ${palette.green20})`,
160+
active: `light-dark(${palette.green90}, ${palette.green10})`,
208161
},
209162
error: {
210-
default: palette.red60,
211-
hover: palette.red20,
212-
active: palette.red10,
163+
default: `light-dark(${palette.red60}, ${palette.red60})`,
164+
hover: `light-dark(${palette.red60}, ${palette.red20})`,
165+
active: `light-dark(${palette.red80}, ${palette.red10})`,
213166
},
214167
warning: {
215-
default: palette.orange40,
216-
hover: palette.orange20,
217-
active: palette.orange10,
168+
default: `light-dark(${palette.orange60}, ${palette.orange40})`,
169+
hover: `light-dark(${palette.orange80}, ${palette.orange20})`,
170+
active: `light-dark(${palette.orange90}, ${palette.orange10})`,
218171
},
219-
},
220-
};
172+
};
173+
return dismissButtonColors[type as keyof typeof dismissButtonColors];
174+
}

‎pages/badge/style-custom-types.page.tsx‎

Lines changed: 41 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import React, { useRef } from 'react';
4-
5-
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
3+
import React from 'react';
64

75
import { Badge as CloudscapeBadge, SpaceBetween } from '~components';
86

@@ -31,20 +29,15 @@ interface CustomBadgeProps {
3129
}
3230

3331
function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
34-
const mode = useCurrentMode(useRef(document.body));
35-
const background = backgrounds[mode][colorTheme];
36-
const borderColor = borderColors[mode][colorTheme];
37-
const borderWidth = borderWidths[colorTheme];
38-
const color = colors[mode];
3932
return (
4033
<CloudscapeBadge
4134
style={{
4235
root: {
43-
background,
44-
borderColor,
36+
background: getBackground(colorTheme),
37+
borderColor: getBorderColor(colorTheme),
4538
borderRadius: '8px',
46-
color,
47-
borderWidth,
39+
color: getColor(),
40+
borderWidth: getBorderWidth(colorTheme),
4841
paddingBlock: '8px',
4942
paddingInline: '12px',
5043
},
@@ -55,54 +48,42 @@ function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
5548
);
5649
}
5750

58-
const backgrounds = {
59-
light: {
60-
blue: palette.blue80,
61-
critical: palette.red80,
62-
high: palette.red60,
63-
medium: palette.green80,
64-
low: palette.teal90,
65-
neutral: palette.neutral80,
66-
},
67-
dark: {
68-
blue: palette.blue40,
69-
critical: palette.red30,
70-
high: palette.red30,
71-
medium: palette.green20,
72-
low: palette.teal20,
73-
neutral: palette.neutral20,
74-
},
75-
};
51+
function getBackground(colorTheme: string) {
52+
const backgrounds = {
53+
blue: `light-dark(${palette.blue80}, ${palette.blue40})`,
54+
critical: `light-dark(${palette.red80}, ${palette.red30})`,
55+
high: `light-dark(${palette.red60}, ${palette.red30})`,
56+
medium: `light-dark(${palette.green80}, ${palette.green20})`,
57+
low: `light-dark(${palette.teal90}, ${palette.teal20})`,
58+
neutral: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
59+
};
60+
return backgrounds[colorTheme as keyof typeof backgrounds];
61+
}
7662

77-
const colors = {
78-
light: 'white',
79-
dark: 'black',
80-
};
63+
function getColor() {
64+
return 'light-dark(white, black)';
65+
}
8166

82-
const borderColors = {
83-
light: {
84-
blue: palette.neutral80,
85-
critical: palette.blue90,
86-
high: palette.red80,
87-
medium: palette.green80,
88-
low: palette.neutral80,
89-
neutral: palette.teal80,
90-
},
91-
dark: {
92-
blue: palette.neutral20,
93-
critical: palette.red60,
94-
high: palette.red10,
95-
medium: palette.green30,
96-
low: palette.neutral20,
97-
neutral: palette.teal40,
98-
},
99-
};
67+
function getBorderColor(colorTheme: string) {
68+
const borderColors = {
69+
blue: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
70+
critical: `light-dark(${palette.blue90}, ${palette.red60})`,
71+
high: `light-dark(${palette.red80}, ${palette.red10})`,
72+
medium: `light-dark(${palette.green80}, ${palette.green30})`,
73+
low: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
74+
neutral: `light-dark(${palette.teal80}, ${palette.teal40})`,
75+
};
76+
return borderColors[colorTheme as keyof typeof borderColors];
77+
}
10078

101-
const borderWidths = {
102-
blue: '2px',
103-
critical: '4px',
104-
high: '0px',
105-
medium: '0px',
106-
low: '0px',
107-
neutral: '0px',
108-
};
79+
function getBorderWidth(colorTheme: string) {
80+
const borderWidths = {
81+
blue: '2px',
82+
critical: '4px',
83+
high: '0px',
84+
medium: '0px',
85+
low: '0px',
86+
neutral: '0px',
87+
};
88+
return borderWidths[colorTheme as keyof typeof borderWidths];
89+
}

0 commit comments

Comments
 (0)