app-studio 0.7.12 → 0.7.13

package/docs/README.md

@@ -561,7 +561,7 @@ Manages the application's theme, including color palettes, light/dark modes, and
 
 **Context Values (via `useTheme`)**
 
-*   `getColor(colorName, mode?)`: Resolves a color string (e.g., `color-blue-500`, `theme-primary`) to its CSS value for the specified or current theme mode. You can also directly access specific theme mode colors using the `light-` or `dark-` prefix (e.g., `light-white` or `dark-red-200`), which will always use that specific theme mode's color regardless of the current theme setting.
+*   `getColor(colorName, mode?)`: Resolves a color string (e.g., `color-blue-500`, `theme-primary`) to its CSS value for the specified or current theme mode. You rarely need to call this — App-Studio components resolve color strings passed as props automatically. Use `getColor` only when passing a color to a non-App-Studio element or when you need the raw CSS value for a computed style. You can also directly access specific theme mode colors using the `light-` or `dark-` prefix (e.g., `light-white` or `dark-red-200`), which will always use that specific theme mode's color regardless of the current theme setting.
 *   `theme`: The merged theme configuration object.
 *   `themeMode`: The current mode ('light' or 'dark').
 *   `setThemeMode(mode)`: Function to change the theme mode.
@@ -622,32 +622,31 @@ App-Studio exports utility objects and functions.
 
 ## Colors (`utils/colors.ts`)
 
-Defines the default color palettes (`defaultLightPalette`, `defaultDarkPalette`) and singleton colors (`defaultLightColors`, `defaultDarkColors`) used by `ThemeProvider`. You can import these if needed for custom theme configurations. Colors are accessed within components primarily via the `getColor` function from `useTheme`.
+Defines the default color palettes (`defaultLightPalette`, `defaultDarkPalette`) and singleton colors (`defaultLightColors`, `defaultDarkColors`) used by `ThemeProvider`. You can import these if needed for custom theme configurations.
 
 **Accessing Colors:**
 
+App-Studio components resolve color strings automatically — just pass them as props. You don't need `getColor` for this:
+
 ```jsx
-import { useTheme } from 'app-studio';
-import { View, Text } from './components/Components';
+import { View, Text } from 'app-studio';
 
 function ThemedComponent() {
-  const { getColor } = useTheme();
-
   return (
     <View
-      backgroundColor={getColor('theme-primary')} // Get theme color
-      color={getColor('color-white')}            // Get singleton color
+      backgroundColor="theme-primary"   // Theme color
+      color="color-white"               // Singleton color
       borderRadius={8}
       padding={10}
     >
       <Text>My Themed Content</Text>
 
-      {/* Direct access to specific theme mode colors */}
+      {/* Mode-locked colors work the same way */}
       <View
         marginTop={10}
         padding={8}
-        backgroundColor={getColor('light-blue-200')} // Always light mode blue
-        borderColor={getColor('dark-red-500')}       // Always dark mode red
+        backgroundColor="light-blue-200" // Always light mode blue
+        borderColor="dark-red-500"       // Always dark mode red
         borderWidth={2}
         borderStyle="solid"
         borderRadius={4}
@@ -655,7 +654,6 @@ function ThemedComponent() {
         <Text>Mixed theme mode colors</Text>
       </View>
 
-      {/* Direct usage in component props without getColor */}
       <View marginTop={10} padding={8}>
         <Text color="light-white">Always light mode white text</Text>
         <Text color="dark-blue-700" marginTop={4}>Always dark mode blue text</Text>

package/docs/Styling.md

@@ -408,22 +408,23 @@ Combine multiple state modifiers:
 
 ### Dynamic Theming
 
+App-Studio components resolve theme color strings automatically. Pass the color name directly — no need for `getColor`:
+
 ```javascript
-import { useTheme } from 'app-studio';
 import { View } from 'app-studio';
 
 function DynamicThemedComponent() {
-  const { getColor } = useTheme();
-  
   return (
     <View
-      backgroundColor={getColor('theme-primary')}
-      borderColor={getColor('theme-secondary')}
+      backgroundColor="theme-primary"
+      borderColor="theme-secondary"
     />
   );
 }
 ```
 
+`getColor` from `useTheme` is only needed when passing a resolved CSS color to a non-App-Studio element (e.g., a third-party chart library) or to a computed value outside the prop system.
+
 ### CSS-in-JS Patterns
 
 Use the `css` prop for complex styles:

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.12",
+  "version": "0.7.13",
   "name": "app-studio",
   "description": "App Studio is a responsive and themeable framework to build cross platform applications",
   "repository": "git@github.com:rize-network/app-studio.git",