feat(elevation): add changes from review

twilio-labs · Feb 7, 2025 · 0862138 · 0862138
1 parent c2cd7e4
commit 0862138
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx b/packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx
@@ -110,9 +110,9 @@ const ShadowTokensLevel1 = () => {
           boxShadow="shadowElevation05"
         />
         <Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
-          <LightModeIcon decorative={true} color="colorTextIcon" />
+          <ThemeIcon decorative={true} color="colorTextIcon" />
           <Text as="p" color="colorTextWeak">
-            Light mode
+            Selected theme
           </Text>
         </Box>
         <Text as="p" marginTop="space30">
@@ -190,9 +190,9 @@ const ShadowTokensLevel2 = () => {
           boxShadow="shadowElevation10"
         />
           <Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
-            <LightModeIcon decorative={true} color="colorTextIcon" />
+            <ThemeIcon decorative={true} color="colorTextIcon" />
             <Text as="p" color="colorTextWeak">
-              Light mode
+              Selected theme
             </Text>
           </Box>
           <Text as="p" marginTop="space30">
@@ -270,9 +270,9 @@ const ShadowTokensLevel3 = () => {
           boxShadow="shadowElevation20"
         />
         <Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
-          <LightModeIcon decorative={true} color="colorTextIcon" />
+          <ThemeIcon decorative={true} color="colorTextIcon" />
           <Text as="p" color="colorTextWeak">
-            Light mode
+            Selected theme
           </Text>
         </Box>
         <Text as="p" marginTop="space30">
@@ -335,7 +335,7 @@ export const CalloutExampleImgCaption = (): JSX.Element => (
   <ImageCaption>
     For example: a Callout is typically placed inline with the background content and relies on that context for its
     meaning. However, it uses a slight background change with $color-background-body-elevation to subtly appear more
-    prominent and make its information stand out on top of the default background body color. out.
+    prominent and make its information stand out on top of the default background body color.
   </ImageCaption>
 );
 

diff --git a/packages/paste-website/src/pages/foundations/elevation/index.mdx b/packages/paste-website/src/pages/foundations/elevation/index.mdx
@@ -33,7 +33,7 @@ import {
 import DefaultLayout from '../../../layouts/DefaultLayout';
 import {getNavigationData} from '../../../utils/api';
 import { ElevatedBackgroundColorTokensExample, ShadowTokensLevel1Example, ShadowTokensLevel2Example, ShadowTokensLevel3Example } from '../../../component-examples/ElevationFoundationExamples';
-import { LightModeIcon } from '@twilio-paste/icons/esm/LightModeIcon';
+import { ThemeIcon } from '@twilio-paste/icons/esm/ThemeIcon';
 import { DarkModeIcon } from '@twilio-paste/icons/esm/DarkModeIcon';
 
 export default DefaultLayout;
@@ -188,7 +188,7 @@ Shadows are the most extreme way to display elevation. Overuse of shadows withou
     Box,
     Text,
     Theme,
-    LightModeIcon,
+    ThemeIcon,
     DarkModeIcon
   }}
   noInline
@@ -204,7 +204,7 @@ Shadows are the most extreme way to display elevation. Overuse of shadows withou
     Box,
     Text,
     Theme,
-    LightModeIcon,
+    ThemeIcon,
     DarkModeIcon
   }}
   noInline
@@ -220,7 +220,7 @@ Shadows are the most extreme way to display elevation. Overuse of shadows withou
     Box,
     Text,
     Theme,
-    LightModeIcon,
+    ThemeIcon,
     DarkModeIcon
   }}
   noInline

diff --git a/packages/paste-website/stories/Elevation.stories.tsx b/packages/paste-website/stories/Elevation.stories.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import { DarkModeIcon } from "@twilio-paste/icons/esm/DarkModeIcon";
-import { LightModeIcon } from "@twilio-paste/icons/esm/LightModeIcon";
+import { ThemeIcon } from "@twilio-paste/icons/esm/ThemeIcon";
 import type { BackgroundColor, BoxShadow } from "@twilio-paste/style-props";
 import { Text } from "@twilio-paste/text";
 import { Theme } from "@twilio-paste/theme";
@@ -116,16 +116,16 @@ const ShadowTokens: React.FC<{ boxShadow: BoxShadow; boxShadowlabel: string }> =
           borderBottomRightRadius="borderRadius0"
           boxShadow={boxShadow}
         />
-          <Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
-            <LightModeIcon decorative={true} color="colorTextIcon" />
-            <Text as="p" color="colorTextWeak">
-              Light mode
-            </Text>
-          </Box>
-          <Text as="p" marginTop="space30">
-            {boxShadowlabel}
+        <Box display="flex" alignItems="center" columnGap="space20" marginTop="space50">
+          <ThemeIcon decorative={true} color="colorTextIcon" />
+          <Text as="p" color="colorTextWeak">
+            Selected theme
           </Text>
         </Box>
+        <Text as="p" marginTop="space30">
+          {boxShadowlabel}
+        </Text>
+      </Box>
       <Box width="50%">
         <Theme.Provider theme="twilio-dark">
           <Box