docs(ColorPage): shadow page

packages/react-components/src/docs/components/Table/Table.css

@@ -45,3 +45,10 @@ table tr:not(:last-of-type) td {
   width: 32px;
   height: 32px;
 }
+
+.shadow-example {
+  border-radius: var(--radius-4);
+  background: var(--surface-primary-default);
+  width: 48px;
+  height: 48px;
+}

packages/react-components/src/docs/foundations/Color/Color.stories.mdx

@@ -16,7 +16,13 @@ To use color tokens in your project, you need to import the `DesignToken` consta
 import { DesignToken } from '@livechat/design-system-react-components';
 ```
 
-<hr />
+`DesignToken` contains all the color tokens available in the design system. You can use them in your project by using the `var()` function in CSS:
+
+```css
+.my-element {
+  background-color: var(DesignToken.SurfaceBasicSubtle);
+}
+```
 
 ## Content
 

packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx

@@ -1,29 +1,29 @@
-import { Meta, Canvas } from '@storybook/addon-docs';
-import { Shadow } from '../../components/Shadow/Shadow';
-import { ShadowExamples } from '../../components/Shadow/ShadowExamples';
+import { Meta } from '@storybook/addon-docs';
+import { ShadowTable } from './ShadowTable';
+import { ShadowTokens } from './constants';
 
 <Meta title="Foundations/Shadow" />
 
 # Shadow
 
 Shadows tokens in a design system add depth for a polished look and establishing hierarchy and predictability in user interface.
 
-<Canvas
-  style={{
-    color: 'var(--content-default)',
-    backgroundColor: 'var(--background)',
-  }}
->
-  <Shadow />
-</Canvas>
-
-## Examples
-
-<Canvas
-  style={{
-    color: 'var(--content-default)',
-    backgroundColor: 'var(--background)',
-  }}
->
-  <ShadowExamples />
-</Canvas>
+## Usage
+
+To use shadow tokens in your project, you need to import the `ShadowToken` constant from `@livechat/design-system-react-components`:
+
+```jsx
+import { ShadowToken } from '@livechat/design-system-react-components';
+```
+
+`ShadowToken` contains all the shadow tokens available in the design system. You can use them in your project by using the `var()` function in CSS:
+
+```css
+.my-element {
+  box-shadow: var(${ShadowToken.PopOver});
+}
+```
+
+## Tokens
+
+<ShadowTable data={ShadowTokens} />

packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx

@@ -25,8 +25,8 @@ export const ShadowTable: React.FC<IColorTableProps> = ({ data }) => {
           <tr>
             <td onClick={() => handleCopyText(shadow.enum)}>
               <div
-                className="color-example"
-                style={{ backgroundColor: `var(${shadow.value})` }}
+                className="shadow-example"
+                style={{ boxShadow: `var(${shadow.value})` }}
               />
               {shadow.enum}
             </td>

packages/react-components/src/docs/foundations/Shadow/constants.ts

@@ -2,14 +2,6 @@ import { ShadowToken, ShadowTokenKey } from '../../../foundations/shadow-token';
 
 import { ShadowShape } from './types';
 
-export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(
-  ([key, value]) => ({
-    enum: key,
-    value,
-    desc: ShadowDescription[key as ShadowTokenKey],
-  })
-);
-
 const ShadowDescription: Record<ShadowTokenKey, string> = {
   Float: 'Float sample description',
   PopOver: 'PopOver sample description',
@@ -29,3 +21,11 @@ const ShadowDescription: Record<ShadowTokenKey, string> = {
   DividerBottomRight: 'DividerBottomRight sample description',
   MessageBox: 'MessageBox sample description',
 };
+
+export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(
+  ([key, value]) => ({
+    enum: key as ShadowTokenKey,
+    value,
+    desc: ShadowDescription[key as ShadowTokenKey],
+  })
+);