esm-styles 0.3.1 → 0.3.2

package/doc/ai-guide.md

@@ -172,6 +172,8 @@ export default {
     // Use variable references - gets converted to var(--color-primary)
     backgroundColor: $theme.color.primary,
     color: $theme.color.textOnPrimary,
+    // in case of concatenation, use .var property, otherwise it will be [object Object]
+    border: `1px solid ${$theme.color.primary.var}`,
   },
 }
 ```

package/doc/best-practices.md

@@ -549,6 +549,7 @@ export default {
   button: {
     backgroundColor: $theme.surface.primary,
     color: $theme.text.primary
+    border: `1px solid ${$theme.color.primary.var}` // in case of concatenation, use .var property of variable reference object
   }
 }
 ```

package/doc/usage-guide.md

@@ -649,4 +649,4 @@ button {
 The supporting modules provide:
 
 - Autocomplete for available variables in most code editors
-- The ability to see the actual values for each theme
+- The ability to see the actual values for each theme or device

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm-styles",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",