app-studio 0.7.2 → 0.7.5

package/docs/Theming.md

@@ -7,14 +7,14 @@ Theming is an essential part of any application. It allows you to maintain a con
 App-Studio provides an extensive color system with three types of colors:
 
 ### 1. Singleton Colors (Basic Colors)
-These are simple named colors accessible via `color.{name}`:
+These are simple named colors accessible via `color-{name}`:
 
 - **Basic Colors**: `white`, `black`, `red`, `green`, `blue`, `yellow`, `cyan`, `magenta`, `grey`, `orange`, `brown`, `purple`, `pink`, `lime`, `teal`, `navy`, `olive`, `maroon`, `gold`, `silver`, `indigo`, `violet`, `beige`, `turquoise`, `coral`, `chocolate`, `skyBlue`, `plum`, `darkGreen`, `salmon`
 
-**Usage**: `color.white`, `color.gold`, `color.turquoise`
+**Usage**: `color-white`, `color-gold`, `color-turquoise`
 
 ### 2. Color Palettes (Shaded Colors)
-Each palette has 9 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) accessible via `color.{palette}.{shade}`:
+Each palette has 9 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) accessible via `color-{palette}-{shade}`:
 
 **Available Palettes**:
 - **Alpha Channels**: `whiteAlpha`, `blackAlpha` - RGBA colors with varying opacity
@@ -25,56 +25,84 @@ Each palette has 9 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) acce
 - **Greens**: `teal`, `emerald`, `green`, `lime`
 - **Yellows & Oranges**: `yellow`, `amber`, `orange`
 
-**Usage**: `color.blue.500`, `color.rose.200`, `color.gray.800`
+**Usage**: `color-blue-500`, `color-rose-200`, `color-gray-800`
 
 ### 3. Theme Colors
-Custom theme colors defined in your theme configuration, accessible via `theme.{path}`:
+Custom theme colors defined in your theme configuration, accessible via `theme-{path}`:
 
 **Default Theme Colors**:
-- `theme.primary` - Main brand color (default: black)
-- `theme.secondary` - Secondary brand color (default: blue)
-- `theme.success` - Success state color (default: green.500)
-- `theme.error` - Error state color (default: red.500)
-- `theme.warning` - Warning state color (default: orange.500)
-- `theme.disabled` - Disabled state color (default: gray.500)
-- `theme.loading` - Loading state color (default: dark.500)
+- `theme-primary` - Main brand color (default: black)
+- `theme-secondary` - Secondary brand color (default: blue)
+- `theme-success` - Success state color (default: green.500)
+- `theme-error` - Error state color (default: red.500)
+- `theme-warning` - Warning state color (default: orange.500)
+- `theme-disabled` - Disabled state color (default: gray.500)
+- `theme-loading` - Loading state color (default: dark-500)
 
-You can extend these with custom theme paths like `theme.button.background` or `theme.header.text`.
+You can extend these with custom theme paths like `theme-button-background` or `theme-header-text`.
 
-### 4. Mode-Specific Colors
-Access light or dark mode colors directly, regardless of current theme:
+**Theme Colors with Alpha Transparency**:
 
-- **Light Mode**: `light.{colorName}` or `light.{palette}.{shade}`
-- **Dark Mode**: `dark.{colorName}` or `dark.{palette}.{shade}`
+You can add alpha transparency to any theme color by appending a numeric value (0-1000):
 
-**Usage**: `light.white`, `dark.blue.500`, `light.gray.100`
+**Syntax**: `theme-{key}-{alpha}`
 
-### Color System Hierarchy
+**Examples**:
+- `theme-primary-100` → Primary color with 10% opacity
+- `theme-primary-500` → Primary color with 50% opacity
+- `theme-secondary-200` → Secondary color with 20% opacity
+- `theme-error-300` → Error color with 30% opacity
+
+This is especially useful for creating subtle backgrounds, overlays, or hover states using your theme colors:
+
+```javascript
+<View backgroundColor="theme-primary-100" padding={20}>
+  <Text color="theme-primary">Subtle primary background</Text>
+</View>
+
+<Button
+  backgroundColor="theme-secondary"
+>
+  Hover me
+</Button>
 ```
-color.*           → Direct color access (current theme mode)
-  ├─ color.white  → Singleton colors
-  └─ color.blue.500 → Palette colors with shades
 
-theme.*           → Custom theme configuration
-  ├─ theme.primary
-  └─ theme.button.background
+### 4. Mode-Specific Colors
+Access light or dark mode colors directly, regardless of current theme:
+
+- **Light Mode**: `light-{colorName}` or `light-{palette}-{shade}`
+- **Dark Mode**: `dark-{colorName}` or `dark-{palette}-{shade}`
 
-light.*           → Always use light mode colors
-  ├─ light.white
-  └─ light.blue.500
+**Usage**: `light-white`, `dark-blue-500`, `light-gray-100`
 
-dark.*            → Always use dark mode colors
-  ├─ dark.white
-  └─ dark.red.200
+### Color System Hierarchy
+```
+color-*           → Direct color access (current theme mode)
+  ├─ color-white  → Singleton colors
+  ├─ color-blue-500 → Palette colors with shades
+  └─ color-blue-500-200 → Palette colors with alpha (20% opacity)
+
+theme-*           → Custom theme configuration
+  ├─ theme-primary → Theme color
+  ├─ theme-primary-100 → Theme color with alpha (10% opacity)
+  └─ theme-button-background → Nested theme path
+
+light-*           → Always use light mode colors
+  ├─ light-white
+  └─ light-blue-500
+
+dark-*            → Always use dark mode colors
+  ├─ dark-white
+  └─ dark-red-200
 ```
 
 ### 5. Alpha Transparency (4th Parameter)
 
 Add dynamic transparency to any palette color using a 4th parameter. The alpha value ranges from 0-1000, which maps to CSS opacity percentages (0%-100%).
 
-**Syntax**: `color.{palette}.{shade}.{alpha}`
+**Syntax**: `color-{palette}-{shade}-{alpha}`
 
-**Alpha Value Range**: 
+**Alpha Value Range**:
 - `0` = fully transparent (0% opacity)
 - `500` = semi-transparent (50% opacity)
 - `1000` = fully opaque (100% opacity)
@@ -86,9 +114,9 @@ Instead of computing RGBA values in JavaScript, App-Studio uses the modern CSS `
 - **Standards-based**: Uses native CSS color functions
 
 **Examples**:
-- `color.black.900.200` → `color-mix(in srgb, var(--color-black-900) 20%, transparent)` - Black with 20% opacity
-- `color.blue.500.500` → `color-mix(in srgb, var(--color-blue-500) 50%, transparent)` - Blue.500 with 50% opacity
-- `color.red.600.800` → `color-mix(in srgb, var(--color-red-600) 80%, transparent)` - Red.600 with 80% opacity
+- `color-black-900-200` → `color-mix(in srgb, var(--color-black-900) 20%, transparent)` - Black with 20% opacity
+- `color-blue-500-500` → `color-mix(in srgb, var(--color-blue-500) 50%, transparent)` - Blue-500 with 50% opacity
+- `color-red-600-800` → `color-mix(in srgb, var(--color-red-600) 80%, transparent)` - Red-600 with 80% opacity
 
 **Use Cases**:
 - Create semi-transparent overlays without defining new alpha color palettes
@@ -98,13 +126,13 @@ Instead of computing RGBA values in JavaScript, App-Studio uses the modern CSS `
 
 ```javascript
 // Semi-transparent overlay
-<View backgroundColor="color.black.900.300" padding={20}>
-  <Text color="color.white">30% opacity black overlay</Text>
+<View backgroundColor="color-black-900-300" padding={20}>
+  <Text color="color-white">30% opacity black overlay</Text>
 </View>
 
 // Glassmorphism card
-<View 
-  backgroundColor="color.gray.100.200" 
+<View
+  backgroundColor="color-gray-100-200"
   backdropFilter="blur(10px)"
   padding={20}
 >
@@ -112,8 +140,8 @@ Instead of computing RGBA values in JavaScript, App-Studio uses the modern CSS `
 </View>
 
 // Gradient with alpha colors (CSS variables!)
-<View 
-  background="linear-gradient(135deg, color.red.500.200 0%, color.blue.500.1000 100%)"
+<View
+  background="linear-gradient(135deg, color-red-500-200 0%, color-blue-500-1000 100%)"
   padding={20}
 >
   <Text>Gradient with variable-based alpha colors</Text>
@@ -238,10 +266,10 @@ Now that the theme is available, you can use it in your components. All color re
 App-Studio supports multiple ways to reference colors:
 
 1. **Direct Color Values**: `"#fff"`, `"rgb(255,0,0)"`, `"transparent"`
-2. **Singleton Colors**: `"color.white"`, `"color.gold"`, `"color.turquoise"`
-3. **Palette Colors**: `"color.blue.500"`, `"color.rose.200"`, `"color.gray.800"`
-4. **Theme Colors**: `"theme.primary"`, `"theme.button.background"`
-5. **Mode-Specific Colors**: `"light.white"`, `"dark.blue.500"`
+2. **Singleton Colors**: `"color-white"`, `"color-gold"`, `"color-turquoise"`
+3. **Palette Colors**: `"color-blue-500"`, `"color-rose-200"`, `"color-gray-800"`
+4. **Theme Colors**: `"theme-primary"`, `"theme-button-background"`
+5. **Mode-Specific Colors**: `"light-white"`, `"dark-blue-500"`
 
 ### Examples
 
@@ -251,23 +279,23 @@ import { Button } from '@app-studio/web';
 
 function Example() {
   return (
-    <View backgroundColor="color.blue">
+    <View backgroundColor="color-blue">
        {/* Using palette colors with shades */}
-       <View backgroundColor="color.blueGray.500">
-        <Text color="theme.primary">Hello</Text>
+       <View backgroundColor="color-blueGray-500">
+        <Text color="theme-primary">Hello</Text>
        </View>
        
        {/* Using theme colors */}
-       <Button backgroundColor="theme.button.background">Hello</Button>
+       <Button backgroundColor="theme-button-background">Hello</Button>
        
        {/* Using singleton colors */}
-       <View backgroundColor="color.turquoise" padding={10}>
-         <Text color="color.white">Turquoise Background</Text>
+       <View backgroundColor="color-turquoise" padding={10}>
+         <Text color="color-white">Turquoise Background</Text>
        </View>
        
        {/* Using alpha colors for transparency */}
-       <View backgroundColor="color.blackAlpha.500">
-         <Text color="color.whiteAlpha.900">Semi-transparent</Text>
+       <View backgroundColor="color-blackAlpha-500">
+         <Text color="color-whiteAlpha-900">Semi-transparent</Text>
        </View>
     </View>
   );
@@ -279,54 +307,54 @@ function Example() {
 Each palette below has shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
 
 **Alpha Transparency**:
-- `color.whiteAlpha.{shade}` - White with alpha (rgba)
-- `color.blackAlpha.{shade}` - Black with alpha (rgba)
+- `color-whiteAlpha-{shade}` - White with alpha (rgba)
+- `color-blackAlpha-{shade}` - Black with alpha (rgba)
 
 **Neutral Colors**:
-- `color.white.{shade}` - White to light gray scale
-- `color.black.{shade}` - Black to dark gray scale
-- `color.gray.{shade}` - True gray scale
-- `color.slate.{shade}` - Cool gray with blue undertones
-- `color.zinc.{shade}` - Neutral gray scale
-- `color.neutral.{shade}` - True neutral gray
-- `color.stone.{shade}` - Warm gray with brown undertones
-- `color.dark.{shade}` - Dark neutral scale
-- `color.light.{shade}` - Light neutral scale
-- `color.warmGray.{shade}` - Warm gray tones
-- `color.trueGray.{shade}` - True neutral gray (legacy)
-- `color.coolGray.{shade}` - Cool gray tones
-- `color.blueGray.{shade}` - Blue-tinted gray
+- `color-white-{shade}` - White to light gray scale
+- `color-black-{shade}` - Black to dark gray scale
+- `color-gray-{shade}` - True gray scale
+- `color-slate-{shade}` - Cool gray with blue undertones
+- `color-zinc-{shade}` - Neutral gray scale
+- `color-neutral-{shade}` - True neutral gray
+- `color-stone-{shade}` - Warm gray with brown undertones
+- `color-dark-{shade}` - Dark neutral scale
+- `color-light-{shade}` - Light neutral scale
+- `color-warmGray-{shade}` - Warm gray tones
+- `color-trueGray-{shade}` - True neutral gray (legacy)
+- `color-coolGray-{shade}` - Cool gray tones
+- `color-blueGray-{shade}` - Blue-tinted gray
 
 **Red & Pink Family**:
-- `color.rose.{shade}` - Rose pink tones
-- `color.pink.{shade}` - Pink tones
-- `color.red.{shade}` - Red tones
+- `color-rose-{shade}` - Rose pink tones
+- `color-pink-{shade}` - Pink tones
+- `color-red-{shade}` - Red tones
 
 **Purple Family**:
-- `color.fuchsia.{shade}` - Bright purple-pink
-- `color.purple.{shade}` - Purple tones
-- `color.violet.{shade}` - Violet tones
+- `color-fuchsia-{shade}` - Bright purple-pink
+- `color-purple-{shade}` - Purple tones
+- `color-violet-{shade}` - Violet tones
 
 **Blue Family**:
-- `color.indigo.{shade}` - Deep blue-purple
-- `color.blue.{shade}` - Blue tones
-- `color.lightBlue.{shade}` - Light blue tones
-- `color.cyan.{shade}` - Cyan tones
+- `color-indigo-{shade}` - Deep blue-purple
+- `color-blue-{shade}` - Blue tones
+- `color-lightBlue-{shade}` - Light blue tones
+- `color-cyan-{shade}` - Cyan tones
 
 **Green Family**:
-- `color.teal.{shade}` - Teal (blue-green)
-- `color.emerald.{shade}` - Emerald green
-- `color.green.{shade}` - Green tones
-- `color.lime.{shade}` - Lime green
+- `color-teal-{shade}` - Teal (blue-green)
+- `color-emerald-{shade}` - Emerald green
+- `color-green-{shade}` - Green tones
+- `color-lime-{shade}` - Lime green
 
 **Yellow & Orange Family**:
-- `color.yellow.{shade}` - Yellow tones
-- `color.amber.{shade}` - Amber (orange-yellow)
-- `color.orange.{shade}` - Orange tones
+- `color-yellow-{shade}` - Yellow tones
+- `color-amber-{shade}` - Amber (orange-yellow)
+- `color-orange-{shade}` - Orange tones
 
 ### Accessing Specific Theme Mode Colors
 
-You can directly access colors from a specific theme mode regardless of the current theme mode using the `light.` or `dark.` prefix:
+You can directly access colors from a specific theme mode regardless of the current theme mode using the `light-` or `dark-` prefix:
 
 ```javascript
 import { View, Text } from 'app-studio';
@@ -335,11 +363,11 @@ function Example() {
   return (
     <View>
       {/* Always use light mode white color regardless of current theme mode */}
-      <Text color="light.white">Always light mode white</Text>
+      <Text color="light-white">Always light mode white</Text>
 
-      {/* Always use dark mode red.200 color regardless of current theme mode */}
-      <View backgroundColor="dark.red.200">
-        <Text>Always dark mode red.200 background</Text>
+      {/* Always use dark mode red-200 color regardless of current theme mode */}
+      <View backgroundColor="dark-red-200">
+        <Text>Always dark mode red-200 background</Text>
       </View>
     </View>
   );
@@ -350,7 +378,7 @@ This is useful when you need to access a specific theme mode's color regardless
 
 ### Direct Theme Color Access
 
-App-Studio allows you to directly call theme colors using a simple dot notation format. This makes your code more readable and maintainable:
+App-Studio allows you to directly call theme colors using dash notation format. This makes your code more readable and maintainable:
 
 ```javascript
 import { View, Text } from 'app-studio';
@@ -359,21 +387,21 @@ function Example() {
   return (
     <View>
       {/* Access light theme colors directly */}
-      <Text color="light.white">White text in light mode</Text>
-      <View backgroundColor="light.blue.500">
+      <Text color="light-white">White text in light mode</Text>
+      <View backgroundColor="light-blue-500">
         <Text>Light blue background</Text>
       </View>
 
       {/* Access dark theme colors directly */}
-      <Text color="dark.white">White text in dark mode</Text>
-      <View backgroundColor="dark.red.200">
+      <Text color="dark-white">White text in dark mode</Text>
+      <View backgroundColor="dark-red-200">
         <Text>Dark red background</Text>
       </View>
 
       {/* Mix and match in the same component */}
       <View
-        backgroundColor="light.gray.100"
-        borderColor="dark.gray.800"
+        backgroundColor="light-gray-100"
+        borderColor="dark-gray-800"
         borderWidth={1}
       >
         <Text>Mixed theme colors</Text>
@@ -383,7 +411,7 @@ function Example() {
 }
 ```
 
-This direct access syntax works with all color-related properties and can be used with both singleton colors (like `white`, `black`) and palette colors (like `red.200`, `blue.500`). It provides a convenient way to reference specific theme colors without having to use the `getColor` function from the `useTheme` hook.
+This direct access syntax works with all color-related properties and can be used with both singleton colors (like `white`, `black`) and palette colors (like `red-200`, `blue-500`). It provides a convenient way to reference specific theme colors without having to use the `getColor` function from the `useTheme` hook.
 
 ### Smart Text Contrast
 
@@ -449,19 +477,19 @@ import { ThemeProvider, View, Text, Button } from 'app-studio';
 // Custom theme configuration
 const theme = {
   main: {
-    primary: 'color.blue.600',      // References a palette color
-    secondary: 'color.purple.500',
-    accent: 'color.orange.400'
+    primary: 'color-blue-600',      // References a palette color
+    secondary: 'color-purple-500',
+    accent: 'color-orange-400'
   },
   components: {
     button: {
-      background: 'color.emerald.500',
-      text: 'color.white',
-      disabled: 'color.gray.400'
+      background: 'color-emerald-500',
+      text: 'color-white',
+      disabled: 'color-gray-400'
     },
     card: {
-      background: 'color.white',
-      border: 'color.gray.200'
+      background: 'color-white',
+      border: 'color-gray-200'
     }
   }
 };
@@ -493,40 +521,40 @@ function Example() {
   return (
     <ThemeProvider theme={theme} colors={customColors} mode="light">
       {/* Using theme colors */}
-      <View backgroundColor="theme.components.card.background" padding={20}>
-        <Text color="theme.main.primary" fontSize={24}>
+      <View backgroundColor="theme-components-card-background" padding={20}>
+        <Text color="theme-main-primary" fontSize={24}>
           Primary Theme Color
         </Text>
         
         {/* Using palette colors directly */}
-        <View backgroundColor="color.rose.100" padding={10} marginTop={10}>
-          <Text color="color.rose.900">Rose palette color</Text>
+        <View backgroundColor="color-rose-100" padding={10} marginTop={10}>
+          <Text color="color-rose-900">Rose palette color</Text>
         </View>
         
         {/* Using singleton colors */}
-        <View backgroundColor="color.turquoise" padding={10} marginTop={10}>
-          <Text color="color.white">Turquoise singleton</Text>
+        <View backgroundColor="color-turquoise" padding={10} marginTop={10}>
+          <Text color="color-white">Turquoise singleton</Text>
         </View>
         
         {/* Using custom colors */}
-        <View backgroundColor="color.brand" padding={10} marginTop={10}>
-          <Text color="color.white">Custom brand color</Text>
+        <View backgroundColor="color-brand" padding={10} marginTop={10}>
+          <Text color="color-white">Custom brand color</Text>
         </View>
         
         {/* Using mode-specific colors */}
-        <View backgroundColor="light.gray.100" padding={10} marginTop={10}>
-          <Text color="dark.gray.900">Always light background, dark text</Text>
+        <View backgroundColor="light-gray-100" padding={10} marginTop={10}>
+          <Text color="dark-gray-900">Always light background, dark text</Text>
         </View>
         
         {/* Using alpha transparency */}
-        <View backgroundColor="color.blackAlpha.500" padding={10} marginTop={10}>
-          <Text color="color.whiteAlpha.900">Semi-transparent overlay</Text>
+        <View backgroundColor="color-blackAlpha-500" padding={10} marginTop={10}>
+          <Text color="color-whiteAlpha-900">Semi-transparent overlay</Text>
         </View>
         
         {/* Button using theme */}
         <Button 
-          backgroundColor="theme.components.button.background"
-          color="theme.components.button.text"
+          backgroundColor="theme-components-button-background"
+          color="theme-components-button-text"
         >
           Themed Button
         </Button>
@@ -542,32 +570,37 @@ When working with colors in App-Studio, use these patterns:
 
 ### Color Access Patterns
 ```javascript
-// Pattern: color.{name}
-"color.white"           // → "#FFFFFF" (in light mode) or "#000000" (in dark mode)
-"color.gold"            // → "#FFD700"
-"color.turquoise"       // → "#40E0D0"
-
-// Pattern: color.{palette}.{shade}
-"color.blue.500"        // → "#3b82f6" (light) or "#60a5fa" (dark)
-"color.rose.200"        // → "#fecdd3" (light) or "#6b112f" (dark)
-"color.gray.800"        // → "#27272a" (light) or "#f4f4f5" (dark)
-
-// Pattern: color.{palette}.{shade}.{alpha} (CSS color-mix!)
-"color.black.900.200"   // → "color-mix(in srgb, var(--color-black-900) 20%, transparent)"
-"color.blue.500.500"    // → "color-mix(in srgb, var(--color-blue-500) 50%, transparent)"
-"color.red.600.800"     // → "color-mix(in srgb, var(--color-red-600) 80%, transparent)"
-
-// Pattern: theme.{path}
-"theme.primary"         // → Resolves to your theme's primary color
-"theme.button.background" // → Resolves to nested theme path
-
-// Pattern: light.{name} or light.{palette}.{shade}
-"light.white"           // → Always "#FFFFFF" (light mode)
-"light.blue.500"        // → Always "#3b82f6" (light mode value)
-
-// Pattern: dark.{name} or dark.{palette}.{shade}
-"dark.white"            // → Always "#000000" (dark mode white)
-"dark.red.200"          // → Always "#6b112f" (dark mode value)
+// Pattern: color-{name}
+"color-white"           // → "#FFFFFF" (in light mode) or "#000000" (in dark mode)
+"color-gold"            // → "#FFD700"
+"color-turquoise"       // → "#40E0D0"
+
+// Pattern: color-{palette}-{shade}
+"color-blue-500"        // → "#3b82f6" (light) or "#60a5fa" (dark)
+"color-rose-200"        // → "#fecdd3" (light) or "#6b112f" (dark)
+"color-gray-800"        // → "#27272a" (light) or "#f4f4f5" (dark)
+
+// Pattern: color-{palette}-{shade}-{alpha} (CSS color-mix!)
+"color-black-900-200"   // → "color-mix(in srgb, var(--color-black-900) 20%, transparent)"
+"color-blue-500-500"    // → "color-mix(in srgb, var(--color-blue-500) 50%, transparent)"
+"color-red-600-800"     // → "color-mix(in srgb, var(--color-red-600) 80%, transparent)"
+
+// Pattern: theme-{path}
+"theme-primary"         // → Resolves to your theme's primary color
+"theme-button-background" // → Resolves to nested theme path
+
+// Pattern: theme-{key}-{alpha} (CSS color-mix!)
+"theme-primary-100"     // → "color-mix(in srgb, var(--theme-primary) 10%, transparent)"
+"theme-primary-500"     // → "color-mix(in srgb, var(--theme-primary) 50%, transparent)"
+"theme-secondary-200"   // → "color-mix(in srgb, var(--theme-secondary) 20%, transparent)"
+
+// Pattern: light-{name} or light-{palette}-{shade}
+"light-white"           // → Always "#FFFFFF" (light mode)
+"light-blue-500"        // → Always "#3b82f6" (light mode value)
+
+// Pattern: dark-{name} or dark-{palette}-{shade}
+"dark-white"            // → Always "#000000" (dark mode white)
+"dark-red-200"          // → Always "#6b112f" (dark mode value)
 
 // Direct values (unchanged)
 "#ff0000"               // → "#ff0000"
@@ -594,13 +627,13 @@ coolGray, blueGray, slate, zinc, neutral, stone
 ### Shades Available
 Each palette has these shades: `50, 100, 200, 300, 400, 500, 600, 700, 800, 900`
 
-**Note**: For a `1000` shade (fully opaque), use the alpha parameter: `color.{palette}.900.1000`
+**Note**: For a `1000` shade (fully opaque), use the alpha parameter: `color-{palette}-900-1000`
 
 ### Theme Mode Behavior
 - **Light Mode**: Uses `defaultLightPalette` and `defaultLightColors`
 - **Dark Mode**: Uses `defaultDarkPalette` and `defaultDarkColors`
-- Colors automatically switch based on `themeMode` unless using `light.*` or `dark.*` prefix
-- Color values are inverted for dark mode (e.g., `color.white` becomes black in dark mode)
+- Colors automatically switch based on `themeMode` unless using `light-*` or `dark-*` prefix
+- Color values are inverted for dark mode (e.g., `color-white` becomes black in dark mode)
 
 ## Using Colors with Animations
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.2",
+  "version": "0.7.5",
   "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",