docs(Foundation): color groups and description

livechat · Jan 31, 2024 · 68594a7 · 68594a7
1 parent dde9849
commit 68594a7
Show file tree

Hide file tree

Showing 5 changed files with 1,404 additions and 4 deletions.
diff --git a/packages/react-components/src/stories/foundations/Color/ColorTable.module.scss b/packages/react-components/src/stories/foundations/Color/ColorTable.module.scss
@@ -1,4 +1,5 @@
 .color-example {
+  border: 1px solid var(--border-basic-primary);
   border-radius: var(--radius-3);
   width: 32px;
   height: 32px;

diff --git a/packages/react-components/src/stories/foundations/Color/ColorTable.tsx b/packages/react-components/src/stories/foundations/Color/ColorTable.tsx
@@ -17,7 +17,7 @@ export const ColorTable: React.FC<IColorTableProps> = ({ data }) => {
       renderExample={(token) => (
         <div
           className={styles['color-example']}
-          style={{ backgroundColor: `var(${token})` }}
+          style={{ background: `var(${token})` }}
         />
       )}
       columnNames={['Enum', 'Token', 'Usage']}

diff --git a/packages/react-components/src/stories/foundations/Color/constants.ts b/packages/react-components/src/stories/foundations/Color/constants.ts
@@ -1,6 +1,7 @@
 import { DesignToken, DesignTokenKey } from '../../../foundations/design-token';
 
-import { ColorGroup, ColorShape } from './types';
+import { ColorsData } from './data';
+import { ColorShape } from './types';
 
 const ColorBaseVariants = Object.entries(DesignToken).map(([key, token]) => ({
   enum: key as DesignTokenKey,
@@ -10,6 +11,6 @@ const ColorBaseVariants = Object.entries(DesignToken).map(([key, token]) => ({
 // TODO: change group and desc to match the design system
 export const ColorsTokens: ColorShape[] = ColorBaseVariants.map((color) => ({
   ...color,
-  desc: 'Temporary description',
-  group: ColorGroup.Other,
+  desc: ColorsData[color.enum]?.desc ?? '',
+  group: ColorsData[color.enum]?.group,
 })).sort((a, b) => a.enum.localeCompare(b.enum));