Gradient direction fixed; changed how references rendered for classes

Author: iterpugov

src/js/helpers.js

@@ -35,6 +35,26 @@ Pulsar.registerFunction(
   }
 );
 
+
+function findAliases(token, allTokens){
+  let aliases = allTokens.filter(t => t.value?.referencedToken?.id === token?.id)
+  for (const t of aliases) {
+    aliases = aliases.concat(findAliases(t, allTokens))
+  }
+  return aliases;
+}
+
+Pulsar.registerFunction("findAliases", findAliases)
+
+Pulsar.registerFunction("gradientAngle", function(from, to) {
+    var deltaY = (to.y - from.y);
+    var deltaX = (to.x - from.x);
+    var radians = Math.atan2(deltaY, deltaX); 
+    var result = radians * 180 / Math.PI; 
+    result = result + 90; 
+    return  ((result < 0) ? (360 + result) : result) % 360;
+})
+
 /**
  * Behavior configuration of the exporter
  * Prefixes: Add prefix for each category of the tokens. For example, all colors can start with "color, if needed"

src/main-renderers/rendered-token-class.pr

@@ -24,9 +24,15 @@ Rendered as:
   } 
 
 *}
-{[ let token = context /]}
+{[ let token = context.token /]}
+
 {[ inject "rendered-description" context token /]}
-.{[ inject "rendered-name" context token /]} {
+.{[ inject "rendered-name" context token /]} 
+
+{[ for alias in @js.findAliases(context.token, context.allTokens) ]}
+, {[ inject "rendered-description" context alias /]}
+.{[ inject "rendered-name" context alias /]}
+{[/]} {
   {[ inject "rendered-value" context token /]}
 
 }

src/token-renderers/rendered-gradient.pr

@@ -38,7 +38,7 @@ linear-gradient(
 *}
 {[ inject "reference-wrapper" context context ]}
 {[ let gradientType = "linear-gradient" /]}
-{[ let gradientDirection = "to bottom" /]}
+{[ let gradientDirection = @js.gradientAngle(context.from, context.to).rounded(2).toString().suffixed("deg") /]}
 {[ if @compare.equals(context.type, "Radial") ]}
   {[ set "gradientType" = "radial-gradient" /]}
   {[ set "gradientDirection" = "circle at center" /]}

src/token-renderers/rendered-typography.pr

@@ -51,7 +51,7 @@ Rendered as:
 [text]
 
 *}
-{[ inject "reference-wrapper" context context ]}
+
 {[ let fontStyle = "normal" /]}
 {[ if @ds.fonts.isItalic(context.font) ]}
   {[ set fontStyle = "italic" /]}
@@ -61,8 +61,11 @@ font-style: {{ fontStyle }};
 font-weight: {{ @ds.fonts.weight(context.font) }};
 font-size: {[ inject "rendered-measure" context context.fontSize /]};
 {[ if @compare.nonnull(context.lineHeight) ]}
- line-height: {[ inject "rendered-measure" context context.lineHeight /]};
+line-height: {[ inject "rendered-measure" context context.lineHeight /]};
+{[/]}
+letter-spacing: {[if @compare.equals(context.letterSpacing.unit, "Percent") ]} 
+{{ context.letterSpacing.measure.dividedBy(100).rounded(2) }}em;
+{[ else ]}
+{[ inject "rendered-measure" context context.letterSpacing /]};
 {[/]}
-letter-spacing: {[ inject "rendered-measure" context context.letterSpacing /]};
 text-indent: {[ inject "rendered-measure" context context.paragraphIndent /]};
-{[/]}

src/typography.pr

@@ -5,7 +5,11 @@ Tokens are named by their group path and then name,
 and their value rendered using `rendered-color` blueprint
 
 *}
+{[ const allTokens = @ds.tokensByType("Typography") /]}
+{[ for token in allTokens ]}
+{[ if @compare.null(token.referencedToken) ]}
+{[ inject "rendered-token-class" context @init.dictionary().add("token", token).add("allTokens", allTokens) /]}    
 
-{[ for token in @ds.tokensByType("Typography") ]}
-{[ inject "rendered-token-class" context token /]}    
+
+{[/]}
 {[/]}