fix(Icon): align color example with the latest color updates

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fix
 - Fixed `Flex.Item` children prop type @mnajdova ([#1320](https://github.com/stardust-ui/react/pull/1320))
+- Fixed `Icon`'s color example to align with the latest color updates @mnajdova([#1336](https://github.com/stardust-ui/react/pull/1336))
 
 ### Features
 - Add `selected`, `isFromKeyboard` props to `DropdownItem` @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))

docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx

@@ -3,59 +3,62 @@ import * as _ from 'lodash'
 import { Flex, Icon, Grid, Text, ProviderConsumer } from '@stardust-ui/react'
 
 const IconExampleColor = () => (
-  <Grid columns="repeat(4, auto)" styles={{ alignItems: 'center' }} variables={{ gridGap: '10px' }}>
+  <Grid
+    columns="repeat(4, auto)"
+    styles={{
+      alignItems: 'center',
+    }}
+    variables={{
+      gridGap: '10px',
+    }}
+  >
     <Text content="INHERITED COLOR:" weight="bold" />
-    <Flex gap="gap.smaller" style={{ color: 'violet' }}>
+    <Flex
+      gap="gap.smaller"
+      styles={({ theme: { siteVariables } }) => ({
+        color: siteVariables.colorScheme.brand.foreground,
+      })}
+    >
       <Icon name="calendar" bordered />
       <Icon name="call" bordered />
       <Icon name="call-video" bordered />
     </Flex>
     <Text content="INHERITED COLOR FOR OUTLINED ICONS:" weight="bold" />
-    <Flex gap="gap.smaller" style={{ color: 'yellowgreen' }}>
+    <Flex
+      gap="gap.smaller"
+      styles={({ theme: { siteVariables } }) => ({
+        color: siteVariables.colorScheme.brand.foreground,
+      })}
+    >
       <Icon name="calendar" bordered outline />
       <Icon name="call" bordered outline />
       <Icon name="call-video" bordered outline />
     </Flex>
     <Text weight="bold">
-      USING THE <code>color</code> VARIABLE:
+      USING THE <code>color</code> PROP:
     </Text>
     <Flex gap="gap.smaller">
-      <Icon name="calendar" bordered variables={{ color: 'violet' }} />
-      <Icon name="call" bordered variables={{ color: 'yellowgreen' }} />
-      <Icon name="call-video" bordered variables={{ color: 'cornflowerblue' }} />
+      <ProviderConsumer
+        render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+          _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+            <Icon color={color} name="calendar" title={color} key={color} />
+          ))
+        }
+      />
     </Flex>
     <Text weight="bold">
-      USING THE <code>borderColor</code> VARIABLE:
+      USING THE <code>color</code> PROP WITH OUTLINED ICONS:
     </Text>
     <Flex gap="gap.smaller">
-      <Icon
-        name="calendar"
-        bordered
-        variables={{ color: 'cornflowerblue', borderColor: 'violet' }}
-      />
-      <Icon
-        name="call"
-        bordered
-        variables={{ color: 'cornflowerblue', borderColor: 'yellowgreen' }}
-      />
-      <Icon
-        name="call-video"
-        bordered
-        variables={{ color: 'cornflowerblue', borderColor: 'orangered' }}
+      <ProviderConsumer
+        render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+          _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+            <Icon color={color} name="calendar" outline title={color} key={color} />
+          ))
+        }
       />
     </Flex>
-    <Text weight="bold">
-      USING THE <code>color</code> PROP:
-    </Text>
-    <ProviderConsumer
-      render={({ siteVariables: { emphasisColors, naturalColors } }) => (
-        <Flex gap="gap.smaller">
-          {_.take(_.keys({ ...emphasisColors, ...naturalColors }), 3).map(color => (
-            <Icon key={color} name="call" bordered color={color} />
-          ))}
-        </Flex>
-      )}
-    />
+    <Text weight="bold" size="small" content={'*hover the icons to see the color prop value'} />
   </Grid>
 )
 

packages/react/src/themes/teams-dark/colors.ts

@@ -240,7 +240,7 @@ export const colorScheme: ColorSchemeMapping = {
     borderDisabled: colors.white,
     shadowDisabled: colors.white,
   },
-  grey: createColorScheme('grey'),
+  grey: createColorScheme('grey', { foreground: colors.grey[250] }),
   green: createColorScheme('green'),
   orange: createColorScheme('orange', {
     background: colors.black,