Add CssVariableColorSwatch column to CSS variables list

docs/src/components/CssVariablesList/CssVariableColorSwatch/CssVariableColorSwatch.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ColorSwatch } from '@mantine/core';
+
+const colorVariableRegex = /^(var\(--mantine-color[\w-]+\)|#\w+|rgba?\(\w+\))$/gm;
+
+export interface CssVariableColorSwatchProps {
+  variable: string;
+}
+
+export function CssVariableColorSwatch({ variable }: CssVariableColorSwatchProps) {
+  if (!variable || !variable.match(colorVariableRegex)) {
+    return null;
+  }
+
+  return <ColorSwatch size={20} color={variable} />;
+}

docs/src/components/CssVariablesList/CssVariablesList.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import { Code, DEFAULT_THEME, defaultCssVariablesResolver, keys } from '@mantine/core';
 import { MdxDataTable, MdxTitle } from '../MdxProvider';
+import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColorSwatch';
 
 export function CssVariablesList() {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
   const variables = keys(resolvedVariables.variables).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.variables[key],
+    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} />,
   ]);
 
   const lightVariables = keys(resolvedVariables.light).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.light[key],
+    <CssVariableColorSwatch variable={resolvedVariables.light[key]} />,
   ]);
 
   const darkVariables = keys(resolvedVariables.dark).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.dark[key],
+    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} />,
   ]);
 
   return (