feat(react): wire up theme primaryColor in v0.9 basic catalog

Closes #977

Author: ppazosp

renderers/react/src/v0_9/A2uiSurface.tsx

@@ -127,6 +127,18 @@ DeferredChild.displayName = 'DeferredChild';
 export const A2uiSurface: React.FC<{surface: SurfaceModel<ReactComponentImplementation>}> = ({
   surface,
 }) => {
+  const themeStyle = useMemo(() => {
+    const style: Record<string, string> = {};
+    if (surface.theme?.primaryColor) {
+      style['--a2ui-primary-color'] = surface.theme.primaryColor;
+    }
+    return style;
+  }, [surface.theme]);
+
   // The root component always has ID 'root' and base path '/'
-  return <DeferredChild surface={surface} id="root" basePath="/" />;
+  return (
+    <div style={themeStyle as React.CSSProperties}>
+      <DeferredChild surface={surface} id="root" basePath="/" />
+    </div>
+  );
 };

renderers/react/src/v0_9/catalog/basic/components/Button.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
@@ -27,7 +27,7 @@ export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
     border: props.variant === 'borderless' ? 'none' : '1px solid #ccc',
     backgroundColor:
       props.variant === 'primary'
-        ? 'var(--a2ui-primary-color, #007bff)'
+        ? PRIMARY_COLOR
         : props.variant === 'borderless'
           ? 'transparent'
           : '#fff',

renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,7 +36,7 @@ export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
           type="checkbox"
           checked={!!props.value}
           onChange={onChange}
-          style={{cursor: 'pointer', outline: hasError ? '1px solid red' : 'none'}}
+          style={{cursor: 'pointer', outline: hasError ? '1px solid red' : 'none', accentColor: PRIMARY_COLOR}}
         />
         {props.label && (
           <label

renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx

@@ -17,7 +17,7 @@
 import React, {useState} from 'react';
 import {createReactComponent} from '../../../adapter';
 import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
 // The type of an option is deeply nested into the ChoicePickerApi schema, and
 // it seems z.infer is not inferring it correctly (?). We use `any` for now.
@@ -87,9 +87,9 @@ export const ChoicePicker = createReactComponent(ChoicePickerApi, ({props, conte
                   padding: '4px 12px',
                   borderRadius: '16px',
                   border: isSelected
-                    ? '1px solid var(--a2ui-primary-color, #007bff)'
+                    ? `1px solid ${PRIMARY_COLOR}`
                     : STANDARD_BORDER,
-                  backgroundColor: isSelected ? 'var(--a2ui-primary-color, #007bff)' : '#fff',
+                  backgroundColor: isSelected ? PRIMARY_COLOR : '#fff',
                   color: isSelected ? '#fff' : 'inherit',
                   cursor: 'pointer',
                   fontSize: '12px',

renderers/react/src/v0_9/catalog/basic/components/Slider.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const Slider = createReactComponent(SliderApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -51,7 +51,7 @@ export const Slider = createReactComponent(SliderApi, ({props}) => {
         max={props.max}
         value={props.value ?? 0}
         onChange={onChange}
-        style={{width: '100%', cursor: 'pointer'}}
+        style={{width: '100%', cursor: 'pointer', accentColor: PRIMARY_COLOR}}
       />
     </div>
   );

renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx

@@ -17,7 +17,7 @@
 import {useState} from 'react';
 import {createReactComponent} from '../../../adapter';
 import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 // The type of a tab is deeply nested into the TabsApi schema, and
 // it seems z.infer is not inferring it correctly (?). We use `any` for now.
@@ -42,10 +42,10 @@ export const Tabs = createReactComponent(TabsApi, ({props, buildChild}) => {
               border: 'none',
               background: 'none',
               borderBottom:
-                selectedIndex === i ? '2px solid var(--a2ui-primary-color, #007bff)' : 'none',
+                selectedIndex === i ? `2px solid ${PRIMARY_COLOR}` : 'none',
               fontWeight: selectedIndex === i ? 'bold' : 'normal',
               cursor: 'pointer',
-              color: selectedIndex === i ? 'var(--a2ui-primary-color, #007bff)' : 'inherit',
+              color: selectedIndex === i ? PRIMARY_COLOR : 'inherit',
             }}
           >
             {tab.title}

renderers/react/src/v0_9/catalog/basic/components/TextField.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
 export const TextField = createReactComponent(TextFieldApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -34,6 +34,7 @@ export const TextField = createReactComponent(TextFieldApi, ({props}) => {
     border: STANDARD_BORDER,
     borderRadius: STANDARD_RADIUS,
     boxSizing: 'border-box',
+    outlineColor: PRIMARY_COLOR,
   };
 
   // Note: To have a unique id without passing context we can use a random or provided id,

renderers/react/src/v0_9/catalog/basic/utils.ts

@@ -28,6 +28,12 @@ export const STANDARD_BORDER = '1px solid #ccc';
 /** Standard border radius. */
 export const STANDARD_RADIUS = '8px';
 
+/** Default primary color, used as fallback when no theme is provided. */
+export const DEFAULT_PRIMARY_COLOR = '#007bff';
+
+/** CSS value referencing the theme primary color with fallback. */
+export const PRIMARY_COLOR = `var(--a2ui-primary-color, ${DEFAULT_PRIMARY_COLOR})`;
+
 export const mapJustify = (j?: string) => {
   switch (j) {
     case 'center':