@app-studio/web 0.9.83 → 0.9.85

package/docs/components.md

@@ -105,7 +105,7 @@ const IconExamples = () => {
   return (
     <Horizontal gap={16} alignItems="center">
       <Icon name="Home" size={24} />
-      <Icon name="User" size={24} color={theme.primary} />
+      <Icon name="User" size={24} color={theme-primary} />
       <Icon name="CheckCircle" size={24} color="green" filled />
     </Horizontal>
   );
@@ -114,7 +114,7 @@ const IconExamples = () => {
 
 ### Text
 
-A component for rendering text with consistent typography based on the theme.
+A component for rendering text with consistent typography based on the theme-
 
 **Example:**
 ```tsx
@@ -142,8 +142,8 @@ const HeroTitle = () => (
     size="xl"
     highlightText="Platform"
     highlightStyle="gradient"
-    highlightColor="theme.primary"
-    highlightSecondaryColor="theme.secondary"
+    highlightColor="theme-primary"
+    highlightSecondaryColor="theme-secondary"
     centered
   >
     Welcome to Our Platform

package/docs/conventions.md

@@ -292,7 +292,7 @@ Use the theme system via `useTheme` hook:
 
 ```typescript
 const { getColor, themeMode } = useTheme();
-const colorValue = getColor('theme.primary', { themeMode });
+const colorValue = getColor('theme-primary', { themeMode });
 ```
 
 ### Style Constants

package/docs/design-system/theming.md

@@ -78,8 +78,8 @@ import { View, useTheme } from 'app-studio';
 function ThemedComponent() {
   const { getColor, themeMode } = useTheme();
   
-  const primaryColor = getColor('theme.primary', { themeMode });
-  const textColor = getColor('theme.text', { themeMode });
+  const primaryColor = getColor('theme-primary', { themeMode });
+  const textColor = getColor('theme-text', { themeMode });
   
   return (
     <View backgroundColor={primaryColor} color={textColor}>
@@ -95,29 +95,29 @@ The theme includes the following color categories:
 
 ### Semantic Colors
 
-- `theme.primary`: Primary brand color
-- `theme.secondary`: Secondary brand color
-- `theme.success`: Success state color
-- `theme.warning`: Warning state color
-- `theme.error`: Error state color
-- `theme.info`: Information state color
-- `theme.disabled`: Disabled state color
+- `theme-primary`: Primary brand color
+- `theme-secondary`: Secondary brand color
+- `theme-success`: Success state color
+- `theme-warning`: Warning state color
+- `theme-error`: Error state color
+- `theme-info`: Information state color
+- `theme-disabled`: Disabled state color
 
 ### Neutral Colors
 
-- `color.white`: White
-- `color.black`: Black
-- `color.gray.50` to `color.gray.900`: Gray scale
+- `color-white`: White
+- `color-black`: Black
+- `color-gray.50` to `color-gray-900`: Gray scale
 
 ### Color Scales
 
 Each color has a scale from 50 (lightest) to 900 (darkest):
 
-- `color.blue.50` to `color.blue.900`
-- `color.green.50` to `color.green.900`
-- `color.red.50` to `color.red.900`
-- `color.yellow.50` to `color.yellow.900`
-- `color.purple.50` to `color.purple.900`
+- `color-blue.50` to `color-blue-900`
+- `color-green.50` to `color-green-900`
+- `color-red.50` to `color-red-900`
+- `color-yellow.50` to `color-yellow-900`
+- `color-purple.50` to `color-purple-900`
 
 ## Typography
 
@@ -165,8 +165,8 @@ function SpacingExample() {
   return (
     <View padding={16}>
       <Horizontal gap={8}>
-        <View width={50} height={50} backgroundColor="theme.primary" />
-        <View width={50} height={50} backgroundColor="theme.secondary" />
+        <View width={50} height={50} backgroundColor="theme-primary" />
+        <View width={50} height={50} backgroundColor="theme-secondary" />
       </Horizontal>
     </View>
   );

package/docs/tutorials/README.md

@@ -18,7 +18,7 @@ This section provides step-by-step tutorials for common tasks using the App Stud
 ## Advanced Tutorials
 
 - [Building a Complex Form Wizard](./advanced/building-a-complex-form-wizard.md)
-- [Creating a Custom Theme](./advanced/creating-a-custom-theme.md)
+- [Creating a Custom Theme](./advanced/creating-a-custom-theme-md)
 - [Building a Responsive Dashboard](./advanced/building-a-responsive-dashboard.md)
 - [Creating Custom Components](./advanced/creating-custom-components.md)
 

package/docs/tutorials/basic/creating-a-simple-form.md

@@ -497,9 +497,9 @@ function ContactForm() {
   };
 
   return (
-    <View padding={20} maxWidth={500} margin="0 auto" backgroundColor="color.white" borderRadius={8} boxShadow="0 2px 8px rgba(0, 0, 0, 0.1)">
+    <View padding={20} maxWidth={500} margin="0 auto" backgroundColor="color-white" borderRadius={8} boxShadow="0 2px 8px rgba(0, 0, 0, 0.1)">
       <Vertical gap={20}>
-        <Text fontSize={24} fontWeight="bold" color="theme.primary">Contact Us</Text>
+        <Text fontSize={24} fontWeight="bold" color="theme-primary">Contact Us</Text>
         
         <Formik
           initialValues={{ name: '', email: '', message: '' }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.83",
+  "version": "0.9.85",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -113,7 +113,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "app-studio": "^0.7.0",
+    "app-studio": "^0.7.7",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",