Skip to content

Commit 1d12fda

Browse files
PixeledCodekodiakhq[bot]
PixeledCode
and
kodiakhq[bot]
authored
Create elevation page (#4227)
* feat(elevation): add elevation page * feat(elevation): changes from review * feat(elevation): update anchor url * feat(elevation): implement changes from review * feat(elevation): fix link * feat(elevation): add changes from review * feat(elevation): add changes from review --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 3e9bf5f commit 1d12fda

File tree

11 files changed

+783
-0
lines changed

11 files changed

+783
-0
lines changed

‎cypress/integration/sitemap-vrt/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@ export const SITEMAP = [
290290
"/introduction/about-paste/",
291291
"/introduction/contributing/components/",
292292
"/foundations/content/",
293+
"/foundations/elevation/",
293294
"/introduction/contributing/icons/",
294295
"/introduction/contributing/patterns/",
295296
"/introduction/for-designers/design-guidelines/",

‎packages/paste-website/src/assets/images/foundations/elevation/elevated-background-color-tokens.png

200 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-1-accent-shadow.png

170 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-1-tonal-change.png

234 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png

148 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-2-risen-shadow.png

111 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-3-overlay.png

116 KB
Loading

‎packages/paste-website/src/assets/images/foundations/elevation/level-3-risen-shadow.png

160 KB
Loading

‎packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
import { ImageCaption } from "../components/ImageCaption";
2+
3+
export const ElevatedBackgroundColorTokensExample = `
4+
const ElevatedBackgroundColorTokens = () => {
5+
const TokensTemplate = ({
6+
backgroundColor,
7+
backgroundColorElevated,
8+
hasBorder,
9+
backgroundColorBase,
10+
backgroundColorElevation,
11+
}) => {
12+
return (
13+
<Box flexShrink={0} width="170px">
14+
<Box position="relative">
15+
<Box
16+
backgroundColor={backgroundColor}
17+
borderRadius="borderRadius30"
18+
height="109px"
19+
width="100px"
20+
borderWidth={hasBorder ? "borderWidth10" : "borderWidth0"}
21+
borderStyle="solid"
22+
borderColor="colorBorderWeaker"
23+
/>
24+
<Box
25+
backgroundColor={backgroundColorElevated}
26+
borderRadius="borderRadius30"
27+
height="109px"
28+
width="100px"
29+
position="absolute"
30+
top={23}
31+
left={23}
32+
/>
33+
</Box>
34+
<Box marginTop="space200" fontWeight="fontWeightSemibold">
35+
<Text as="p" color="colorTextWeak" fontSize="fontSize20">
36+
Base:
37+
</Text>
38+
<Text as="p" marginTop="space30" fontSize="fontSize20">
39+
{backgroundColorBase}
40+
</Text>
41+
<Text as="p" marginTop="space40" color="colorTextWeak" fontSize="fontSize20">
42+
Elevation:
43+
</Text>
44+
<Text as="p" marginTop="space30" fontSize="fontSize20">
45+
{backgroundColorElevation}
46+
</Text>
47+
</Box>
48+
</Box>
49+
);
50+
};
51+
return (
52+
<Box display="flex" overflowX="auto" columnGap="space30">
53+
<TokensTemplate
54+
backgroundColor="colorBackgroundBody"
55+
backgroundColorElevated="colorBackgroundBodyElevation"
56+
backgroundColorBase="$color-background-body"
57+
backgroundColorElevation="$color-background-body-elevation"
58+
hasBorder
59+
/>
60+
<TokensTemplate
61+
backgroundColor="colorBackground"
62+
backgroundColorElevated="colorBackgroundElevation"
63+
backgroundColorBase="$color-background"
64+
backgroundColorElevation="$color-background-elevation"
65+
/>
66+
<TokensTemplate
67+
backgroundColor="colorBackgroundInverse"
68+
backgroundColorElevated="colorBackgroundInverseElevation"
69+
backgroundColorBase="$color-background-inverse"
70+
backgroundColorElevation="$color-background-inverse-elevation"
71+
/>
72+
<TokensTemplate
73+
backgroundColor="colorBackgroundInverseStrong"
74+
backgroundColorElevated="colorBackgroundInverseStrongElevation"
75+
backgroundColorBase="$color-background-inverse-strong"
76+
backgroundColorElevation="$color-background-inverse-strong-elevation"
77+
/>
78+
</Box>
79+
);
80+
};
81+
82+
render(
83+
<ElevatedBackgroundColorTokens />
84+
)
85+
`.trim();
86+
87+
export const ShadowTokensLevel1Example = `
88+
const ShadowTokensLevel1 = () => {
89+
return (
90+
<Box display="flex" fontSize="fontSize30" fontWeight="fontWeightSemibold">
91+
<Box
92+
width="50%"
93+
height="300px"
94+
display="flex"
95+
flexDirection="column"
96+
justifyContent="center"
97+
paddingLeft="space80"
98+
borderWidth="borderWidth10"
99+
borderStyle="solid"
100+
borderColor="colorBorderWeaker"
101+
zIndex="zIndex10"
102+
>
103+
<Box
104+
backgroundColor="colorBackgroundWeaker"
105+
height="100px"
106+
borderRadius="borderRadius30"
107+
borderRight="none"
108+
borderTopRightRadius="borderRadius0"
109+
borderBottomRightRadius="borderRadius0"
110+
boxShadow="shadowElevation05"
111+
/>
112+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
113+
<ThemeIcon decorative={true} color="colorTextIcon" />
114+
<Text as="p" color="colorTextWeak">
115+
Selected theme
116+
</Text>
117+
</Box>
118+
<Text as="p" marginTop="space30">
119+
$shadow-elevation-05
120+
</Text>
121+
</Box>
122+
<Box width="50%">
123+
<Theme.Provider theme="twilio-dark">
124+
<Box
125+
backgroundColor="colorBackgroundBody"
126+
height="300px"
127+
display="flex"
128+
flexDirection="column"
129+
justifyContent="center"
130+
paddingRight="space80"
131+
borderWidth="borderWidth10"
132+
borderLeftWidth="borderWidth0"
133+
borderStyle="solid"
134+
borderColor="colorBorderWeaker"
135+
fontWeight="fontWeightSemibold"
136+
>
137+
<Box
138+
backgroundColor="colorBackgroundWeaker"
139+
height="100px"
140+
borderRadius="borderRadius30"
141+
borderLeft="none"
142+
borderTopLeftRadius="borderRadius0"
143+
borderBottomLeftRadius="borderRadius0"
144+
boxShadow="shadowElevation05"
145+
/>
146+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50" paddingLeft="space80">
147+
<DarkModeIcon decorative={true} color="colorTextIcon" />
148+
<Text as="p" color="colorTextWeak">
149+
Dark mode
150+
</Text>
151+
</Box>
152+
<Text as="p" marginTop="space30" paddingLeft="space80">
153+
$shadow-elevation-05
154+
</Text>
155+
</Box>
156+
</Theme.Provider>
157+
</Box>
158+
</Box>
159+
);
160+
};
161+
162+
render(
163+
<ShadowTokensLevel1 />
164+
)
165+
`.trim();
166+
167+
export const ShadowTokensLevel2Example = `
168+
const ShadowTokensLevel2 = () => {
169+
return (
170+
<Box display="flex" fontSize="fontSize30" fontWeight="fontWeightSemibold">
171+
<Box
172+
width="50%"
173+
height="300px"
174+
display="flex"
175+
flexDirection="column"
176+
justifyContent="center"
177+
paddingLeft="space80"
178+
borderWidth="borderWidth10"
179+
borderStyle="solid"
180+
borderColor="colorBorderWeaker"
181+
zIndex="zIndex10"
182+
>
183+
<Box
184+
backgroundColor="colorBackgroundWeaker"
185+
height="100px"
186+
borderRadius="borderRadius30"
187+
borderRight="none"
188+
borderTopRightRadius="borderRadius0"
189+
borderBottomRightRadius="borderRadius0"
190+
boxShadow="shadowElevation10"
191+
/>
192+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
193+
<ThemeIcon decorative={true} color="colorTextIcon" />
194+
<Text as="p" color="colorTextWeak">
195+
Selected theme
196+
</Text>
197+
</Box>
198+
<Text as="p" marginTop="space30">
199+
$shadow-elevation-10
200+
</Text>
201+
</Box>
202+
<Box width="50%">
203+
<Theme.Provider theme="twilio-dark">
204+
<Box
205+
backgroundColor="colorBackgroundBody"
206+
height="300px"
207+
display="flex"
208+
flexDirection="column"
209+
justifyContent="center"
210+
paddingRight="space80"
211+
borderWidth="borderWidth10"
212+
borderLeftWidth="borderWidth0"
213+
borderStyle="solid"
214+
borderColor="colorBorderWeaker"
215+
fontWeight="fontWeightSemibold"
216+
>
217+
<Box
218+
backgroundColor="colorBackgroundWeaker"
219+
height="100px"
220+
borderRadius="borderRadius30"
221+
borderLeft="none"
222+
borderTopLeftRadius="borderRadius0"
223+
borderBottomLeftRadius="borderRadius0"
224+
boxShadow="shadowElevation10"
225+
/>
226+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50" paddingLeft="space80">
227+
<DarkModeIcon decorative={true} color="colorTextIcon" />
228+
<Text as="p" color="colorTextWeak">
229+
Dark mode
230+
</Text>
231+
</Box>
232+
<Text as="p" marginTop="space30" paddingLeft="space80">
233+
$shadow-elevation-10
234+
</Text>
235+
</Box>
236+
</Theme.Provider>
237+
</Box>
238+
</Box>
239+
);
240+
};
241+
242+
render(
243+
<ShadowTokensLevel2 />
244+
)
245+
`.trim();
246+
247+
export const ShadowTokensLevel3Example = `
248+
const ShadowTokensLevel3 = () => {
249+
return (
250+
<Box display="flex" fontSize="fontSize30" fontWeight="fontWeightSemibold">
251+
<Box
252+
width="50%"
253+
height="300px"
254+
display="flex"
255+
flexDirection="column"
256+
justifyContent="center"
257+
paddingLeft="space80"
258+
borderWidth="borderWidth10"
259+
borderStyle="solid"
260+
borderColor="colorBorderWeaker"
261+
zIndex="zIndex10"
262+
>
263+
<Box
264+
backgroundColor="colorBackgroundWeaker"
265+
height="100px"
266+
borderRadius="borderRadius30"
267+
borderRight="none"
268+
borderTopRightRadius="borderRadius0"
269+
borderBottomRightRadius="borderRadius0"
270+
boxShadow="shadowElevation20"
271+
/>
272+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
273+
<ThemeIcon decorative={true} color="colorTextIcon" />
274+
<Text as="p" color="colorTextWeak">
275+
Selected theme
276+
</Text>
277+
</Box>
278+
<Text as="p" marginTop="space30">
279+
$shadow-elevation-20
280+
</Text>
281+
</Box>
282+
<Box width="50%">
283+
<Theme.Provider theme="twilio-dark">
284+
<Box
285+
backgroundColor="colorBackgroundBody"
286+
height="300px"
287+
display="flex"
288+
flexDirection="column"
289+
justifyContent="center"
290+
paddingRight="space80"
291+
borderWidth="borderWidth10"
292+
borderLeftWidth="borderWidth0"
293+
borderStyle="solid"
294+
borderColor="colorBorderWeaker"
295+
fontWeight="fontWeightSemibold"
296+
>
297+
<Box
298+
backgroundColor="colorBackgroundWeaker"
299+
height="100px"
300+
borderRadius="borderRadius30"
301+
borderLeft="none"
302+
borderTopLeftRadius="borderRadius0"
303+
borderBottomLeftRadius="borderRadius0"
304+
boxShadow="shadowElevation20"
305+
/>
306+
<Box display="flex" alignItems="center" columnGap="space20" marginTop="space50" paddingLeft="space80">
307+
<DarkModeIcon decorative={true} color="colorTextIcon" />
308+
<Text as="p" color="colorTextWeak">
309+
Dark mode
310+
</Text>
311+
</Box>
312+
<Text as="p" marginTop="space30" paddingLeft="space80">
313+
$shadow-elevation-20
314+
</Text>
315+
</Box>
316+
</Theme.Provider>
317+
</Box>
318+
</Box>
319+
);
320+
};
321+
322+
render(
323+
<ShadowTokensLevel3 />
324+
)
325+
`.trim();
326+
327+
export const ApplyingLevel1ImgCaption = (): JSX.Element => (
328+
<ImageCaption>
329+
For example: The Side Panel pushes content at Level 0 but is categorized as Level 1, and uses $shadow-elevation-05
330+
because it contains a task that requires user focus while still relying on the background content.
331+
</ImageCaption>
332+
);
333+
334+
export const CalloutExampleImgCaption = (): JSX.Element => (
335+
<ImageCaption>
336+
For example: a Callout is typically placed inline with the background content and relies on that context for its
337+
meaning. However, it uses a slight background change with $color-background-body-elevation to subtly appear more
338+
prominent and make its information stand out on top of the default background body color.
339+
</ImageCaption>
340+
);
341+
342+
export const ApplyLevel2ImgCaption = (): JSX.Element => (
343+
<ImageCaption>
344+
For example: a Topbar&apos;s role is not to be at a high hierarchy but to have enough emphasis and differentiation
345+
to be easily identified at any point of the experience.
346+
</ImageCaption>
347+
);
348+
349+
export const PopoverExampleImgCaption = (): JSX.Element => (
350+
<ImageCaption>
351+
For example: a Popover uses a subtle, sharp shadow with $shadow-elevation-10 to create the illusion of floating
352+
above the content, while still being bound to its trigger button. This adds depth without dominating the
353+
interaction.
354+
</ImageCaption>
355+
);

0 commit comments

Comments
 (0)