@x-wave/blog 1.0.4 → 1.0.5

package/README.md

@@ -65,14 +65,14 @@ Import the i18n setup and framework styles in your app entry point:
 ```ts
 // src/main.tsx
 import '@x-wave/blog/locales'   // Initialises i18next with en, es, zh
-import '@x-wave/blog/styles'    // Framework styles (required)
+import '@x-wave/blog/styles'    // Compiled CSS with variables and component styles (required)
 import { createRoot } from 'react-dom/client'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(<App />)
 ```
 
-> **The styles import is required** for the UI components and layout to render correctly.
+> **The styles import is required** for the UI components and layout to render correctly. This imports a single compiled CSS file (`index.css`) that contains all framework styles, CSS variables, and component styles.
 
 **Add custom translations:**
 
@@ -348,34 +348,36 @@ import type { NavigationEntry, BlogConfig, HeaderLink } from '@x-wave/blog/types
 
 ### CSS variables
 
-The framework exports SCSS variable files. Import and override them in your own stylesheets:
+The framework uses CSS custom properties (`--xw-*` prefix) for theming. These are automatically injected when the framework initializes, but you can override them:
 
-```scss
-// In your app.scss
-@use '~@x-wave/blog/styles/_variables' as vars;
-
-// Override the color palette
-$color-primary: #007bff;
-$color-background: #fafafa;
-
-// Your custom styles here
+```css
+/* In your app.css */
+.xw-blog-root {
+  --xw-primary: #007bff;
+  --xw-background: #fafafa;
+  --xw-foreground: #1a1a1a;
+  /* ... other variables */
+}
 ```
 
-Or import directly from the framework package:
+Or in JavaScript:
 
-```scss
-@import 'node_modules/@x-wave/blog/dist/styles/_variables.scss';
-
-$color-primary: #007bff;
-$color-background: #fafafa;
+```javascript
+const blogRoot = document.querySelector('.xw-blog-root')
+blogRoot.style.setProperty('--xw-primary', '#007bff')
+blogRoot.style.setProperty('--xw-background', '#fafafa')
 ```
 
-Available variables include:
-- `$color-primary`, `$color-secondary`
-- `$color-background`, `$color-text`
-- `$spacing-xs`, `$spacing-sm`, `$spacing-md`, `$spacing-lg`, `$spacing-xl`
-- `$font-family-sans`, `$font-family-mono`
-- And more—see [styles/_variables.scss](packages/styles/_variables.scss)
+Available CSS variables include:
+- `--xw-primary`, `--xw-secondary`
+- `--xw-background`, `--xw-foreground`
+- `--xw-card`, `--xw-card-foreground`
+- `--xw-muted`, `--xw-muted-foreground`
+- `--xw-accent`, `--xw-accent-foreground`
+- `--xw-border`, `--xw-ring`
+- And more—defined in `packages/styles/main.scss`
+
+All CSS variables are scoped to `.xw-blog-root` for isolation and to prevent conflicts with your application styles.
 
 ### Config options
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-wave/blog",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "exports": {
     ".": {