Skip to content

Commit fdb5d49

Browse files
teodoranemesteodoranemes
committed
chore: Update custom dev pages to use light-dark method
1 parent 8c8796c commit fdb5d49

File tree

9 files changed

+294
-643
lines changed

9 files changed

+294
-643
lines changed

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

Lines changed: 53 additions & 93 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,11 +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];
7669
return (
7770
<CloudscapeAlert
7871
dismissible={dismissible}
@@ -81,23 +74,19 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
8174
i18nStrings={i18nStrings}
8275
style={{
8376
root: {
84-
background,
85-
borderColor,
77+
background: getBackground(type),
78+
borderColor: getBorderColor(type),
8679
borderRadius: '8px',
87-
borderWidth,
88-
color,
80+
borderWidth: getBorderWidth(type),
81+
color: getColor(),
8982
focusRing: {
9083
borderColor: palette.red60,
9184
borderRadius: '4px',
9285
borderWidth: '2px',
9386
},
9487
},
9588
dismissButton: {
96-
color: {
97-
default: dismissButtonColors[mode][type].default,
98-
hover: dismissButtonColors[mode][type].hover,
99-
active: dismissButtonColors[mode][type].active,
100-
},
89+
color: getDismissButtonColor(type),
10190
focusRing: {
10291
borderColor: palette.red60,
10392
borderRadius: '4px',
@@ -111,91 +100,62 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
111100
);
112101
}
113102

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

129-
const colors = {
130-
light: palette.neutral10,
131-
dark: palette.neutral100,
132-
};
113+
function getColor() {
114+
return `light-dark(${palette.neutral10}, ${palette.neutral100})`;
115+
}
133116

134-
const borderColors = {
135-
light: {
136-
info: palette.neutral80,
137-
success: palette.green80,
138-
error: palette.blue90,
139-
warning: palette.orange80,
140-
},
141-
dark: {
142-
info: palette.neutral20,
143-
success: palette.green30,
144-
error: palette.red60,
145-
warning: palette.orange40,
146-
},
147-
};
117+
function getBorderColor(type: string) {
118+
const borderColors = {
119+
info: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
120+
success: `light-dark(${palette.green80}, ${palette.green30})`,
121+
error: `light-dark(${palette.blue90}, ${palette.red60})`,
122+
warning: `light-dark(${palette.orange80}, ${palette.orange40})`,
123+
};
124+
return borderColors[type as keyof typeof borderColors];
125+
}
148126

149-
const borderWidths = {
150-
info: '4px',
151-
success: '0px',
152-
error: '6px',
153-
warning: '0px',
154-
};
127+
function getBorderWidth(type: string) {
128+
const borderWidths = {
129+
info: '4px',
130+
success: '0px',
131+
error: '6px',
132+
warning: '0px',
133+
};
134+
return borderWidths[type as keyof typeof borderWidths];
135+
}
155136

156-
const dismissButtonColors = {
157-
light: {
137+
function getDismissButtonColor(type: string) {
138+
const dismissButtonColors = {
158139
info: {
159-
default: palette.green60,
160-
hover: palette.neutral80,
161-
active: palette.neutral90,
140+
default: `light-dark(${palette.green60}, ${palette.neutral40})`,
141+
hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
142+
active: `light-dark(${palette.neutral90}, ${palette.neutral10})`,
162143
},
163144
success: {
164-
default: palette.green60,
165-
hover: palette.green80,
166-
active: palette.green90,
145+
default: `light-dark(${palette.green60}, ${palette.green30})`,
146+
hover: `light-dark(${palette.green80}, ${palette.green20})`,
147+
active: `light-dark(${palette.green90}, ${palette.green10})`,
167148
},
168149
error: {
169-
default: palette.red60,
170-
hover: palette.red60,
171-
active: palette.red80,
150+
default: `light-dark(${palette.red60}, ${palette.red60})`,
151+
hover: `light-dark(${palette.red60}, ${palette.red20})`,
152+
active: `light-dark(${palette.red80}, ${palette.red10})`,
172153
},
173154
warning: {
174-
default: palette.orange60,
175-
hover: palette.orange80,
176-
active: palette.orange90,
177-
},
178-
},
179-
dark: {
180-
info: {
181-
default: palette.neutral40,
182-
hover: palette.neutral20,
183-
active: palette.neutral10,
155+
default: `light-dark(${palette.orange60}, ${palette.orange40})`,
156+
hover: `light-dark(${palette.orange80}, ${palette.orange20})`,
157+
active: `light-dark(${palette.orange90}, ${palette.orange10})`,
184158
},
185-
success: {
186-
default: palette.green30,
187-
hover: palette.green20,
188-
active: palette.green10,
189-
},
190-
error: {
191-
default: palette.red60,
192-
hover: palette.red20,
193-
active: palette.red10,
194-
},
195-
warning: {
196-
default: palette.orange40,
197-
hover: palette.orange20,
198-
active: palette.orange10,
199-
},
200-
},
201-
};
159+
};
160+
return dismissButtonColors[type as keyof typeof dismissButtonColors];
161+
}

‎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)