figmagic - npm Package Compare versions

Comparing version 4.5.7 to 4.5.8

package.json

 {
   "name": "figmagic",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "description": "Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.",
@@ -5,0 +5,0 @@ "homepage": "https://www.figmagic.com",

README.md

@@ -877,2 +877,62 @@ ![Figmagic cover art](images/cover.png)
 
+## Color themes support
+
+From version `4.5.8`, you can also export color themes tokens.
+
+Consider the following example in Figma, as example of an app that allows the user to switch between Dark Theme and Light Themes for enhancing accessibility:
+
+![Figma Color Themes Demo](images/color-themes-demo.png)
+
+It will translate into the following generated tokens:
+
+```js
+const colors = {
+  black: 'rgba(51, 51, 51, 1)',
+  white: 'rgba(255, 255, 255, 1)',
+  red: 'rgba(235, 87, 87, 1)',
+  blue8: 'rgba(47, 128, 237, 1)',
+  green6: 'rgba(33, 150, 83, 1)',
+  darkTheme: {
+    emptyShade: 'rgba(51, 51, 51, 1)',
+    fullShade: 'rgba(255, 255, 255, 1)',
+    mediumShade: 'rgba(189, 189, 189, 1)',
+    darkShade: 'rgba(224, 224, 224, 1)',
+    danger: 'rgba(248, 102, 102, 1)',
+    warning: 'rgba(246, 212, 107, 1)',
+    primary: 'rgba(39, 131, 255, 1)',
+    success: 'rgba(68, 239, 141, 1)'
+  },
+  lightTheme: {
+    fullShade: 'rgba(51, 51, 51, 1)',
+    emptyShade: 'rgba(255, 255, 255, 1)',
+    darkShade: 'rgba(130, 130, 130, 1)',
+    mediumShade: 'rgba(189, 189, 189, 1)',
+    danger: 'rgba(235, 87, 87, 1)',
+    warning: 'rgba(242, 201, 76, 1)',
+    primary: 'rgba(47, 128, 237, 1)',
+    success: 'rgba(33, 150, 83, 1)'
+  }
+};
+```
+
+Which in a practical example you could use as follows:
+
+```js
+
+// initialize with default theme
+let theme = 'lightTheme';
+
+// Primary action button with white color token and with different primary background color according to the theme
+let button = `<button style="background: ${colors[theme].primary}; color: ${colors.white}">Primary Action</button>`;
+
+// Background color that changes according to the theme
+let panel = `<div style=`color: ${colors[theme].emptyShade}`>Panel background</div>`
+```
+
+**Note on Components generation**
+
+Please note that component generation using the `--syncElements` options doesn't support color tokens yet. In case you have a component with a color that only exists on the `colors -> color theme frame` Figmagic will warn about: "No matching token! Hard-coding to expected value". Which means, that the component will still be created, just without a token assigned to it the color, since it currently only looks for the Colors frame and not for nested frames.
+
+---
+
 ## Templates used for code generation
@@ -929,3 +989,3 @@
 
-RGBA colors.
+**Default:** `rgba`. Can be set to `rgba` or `hex`.
 
@@ -932,0 +992,0 @@ ---

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195710

increased by1.2%

Number of lines in readme file

1135

increased by5.58%

No dependency changes