🎨(react) update documentation

This commit revises the color system to enhance modularity and
accessibility. It updates the color classes in the documentation and
stories to reflect the new semantic naming conventions. Additionally,
the structure of the theme configuration has been changed from `theme`
to `globals`, ensuring a more organized approach to color management.
New migration documentation has been added to guide users through the
transition to the updated system, including steps for updating CSS
variables and button props.

packages/react/src/docs/theming.mdx

@@ -49,7 +49,7 @@ It's seamless ! You can still use variables in CSS like this
 <Source dark={true} code={`
 
 .myClass {
-  background-color: var(--c--theme--colors--greyscale-000);
+  background-color: var(--c--contextuals--background--semantic--neutral--secondary);
 }
 
 `}></Source>
@@ -118,9 +118,9 @@ const config: DefaultTokens = {
       ...
     },
     pink: {
-      theme: {
+      globals: {
         colors: {
-          "primary-100": "pink",
+          "brand-100": "pink",
           ...
         }
       }