Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-figma

Package Overview
Dependencies
Maintainers
1
Versions
113
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-figma - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

helpers/gradientParser.d.ts

2

package.json
{
"name": "react-figma",
"version": "0.0.35",
"version": "0.0.36",
"description": "Render React components to Figma",

@@ -5,0 +5,0 @@ "scripts": {

@@ -129,4 +129,2 @@ # React Figma

## [Roadmap](docs/roadmap.md)
## Become a Contributor 🎖

@@ -133,0 +131,0 @@

@@ -29,8 +29,3 @@ "use strict";

if (styles.borderColor) {
props.strokes = [
{
type: 'SOLID',
color: transformColors_1.colorToRGB(styles.borderColor)
}
];
props.strokes = [transformColors_1.colorToPaint(styles.borderColor)];
}

@@ -37,0 +32,0 @@ if (styles.borderWidth) {

export declare const colorToRGB: (color: string) => RGB;
export declare const colorToRGBA: (color: string, opacity: number) => RGBA;
export declare const colorToRGBA: (color: string, opacity?: number) => RGBA;
export declare const colorToPaint: (color: string) => Paint;
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var parse = require("color-parse");
var gradientParser_1 = require("../helpers/gradientParser");
exports.colorToRGB = function (color) {

@@ -26,4 +16,67 @@ var parsed = parse(color);

exports.colorToRGBA = function (color, opacity) {
return __assign({}, exports.colorToRGB(color), { a: opacity });
var parsed = parse(color);
if (parsed && parsed.space === 'rgb') {
return {
r: parsed.values[0] / 255.0,
g: parsed.values[1] / 255.0,
b: parsed.values[2] / 255.0,
a: typeof opacity === 'number' ? opacity : parsed.alpha
};
}
};
var transformAngleToFigmaTransformation = function (value) {
var angle = value - Math.PI / 2;
// **
// There is rotation relative to center through affine transformation
// (xc, yc) is a center of the imaginary 1x1 quad
// (dxc, dyc) is a delta between the old center and the new center (after transformation)
// Transformation matrix has transform to the delta value, because center position should not change.
// **
var xc = 0.5;
var yc = 0.5;
var dxc = xc - (Math.cos(angle) * xc + Math.sin(angle) * yc);
var dyc = yc - (-Math.sin(angle) * xc + Math.cos(angle) * yc);
return [[Math.cos(angle), Math.sin(angle), dxc], [-Math.sin(angle), Math.cos(angle), dyc]];
};
exports.colorToPaint = function (color) {
var parsedGradients;
try {
parsedGradients = gradientParser_1.default.parse(color);
}
catch (e) { }
var parsedGradient = parsedGradients && parsedGradients[0];
if (parsedGradient && parsedGradient.type === 'linear-gradient') {
var gradientTransform = transformAngleToFigmaTransformation(Math.PI);
if (parsedGradient.orientation) {
var orientation_1 = parsedGradient.orientation;
if (orientation_1.type === 'directional') {
if (orientation_1.value === 'right') {
gradientTransform = transformAngleToFigmaTransformation(Math.PI / 2);
}
else if (orientation_1.value === 'left') {
gradientTransform = transformAngleToFigmaTransformation(-Math.PI / 2);
}
else if (orientation_1.value === 'top') {
gradientTransform = transformAngleToFigmaTransformation(0);
}
}
else if (orientation_1.type == 'angular') {
var angle = (parseFloat(orientation_1.value) / 180) * Math.PI;
gradientTransform = transformAngleToFigmaTransformation(angle);
}
}
return {
type: 'GRADIENT_LINEAR',
gradientTransform: gradientTransform,
gradientStops: parsedGradient.colorStops.map(function (_a, index) {
var type = _a.type, value = _a.value, length = _a.length;
return ({
position: length && length.type === '%' ? parseFloat(length.value) / 100 : index === 0 ? 0 : 1,
color: exports.colorToRGBA(type === 'hex' ? "#" + value : value)
});
})
};
}
return { type: 'SOLID', color: exports.colorToRGB(color) };
};
//# sourceMappingURL=transformColors.js.map

@@ -31,3 +31,3 @@ "use strict";

if (style.backgroundColor) {
fills.push({ type: 'SOLID', color: transformColors_1.colorToRGB(style.backgroundColor) });
fills.push(transformColors_1.colorToPaint(style.backgroundColor));
}

@@ -34,0 +34,0 @@ if (style.backgroundImage) {

@@ -33,3 +33,3 @@ "use strict";

}
return __assign({}, ((style && style.color && { fills: [{ type: 'SOLID', color: transformColors_1.colorToRGB(style.color) }] }) || {}), (style &&
return __assign({}, ((style && style.color && { fills: [transformColors_1.colorToPaint(style.color)] }) || {}), (style &&
style.fontFamily && {

@@ -36,0 +36,0 @@ fontName: { family: style.fontFamily, style: converFontStyle_1.convertFontStyle(style.fontWeight, style.fontStyle) }

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc