Merge pull request #9 from reflect-ui/support-text-shadow

support text shadow

Author: softmarshmallow

packages/reflect-core/lib/index.ts

@@ -20,6 +20,7 @@ export * from "./font-weight";
 export * from "./font-style";
 export * from "./icon";
 export * from "./image";
+export * from "./letter-spacing";
 export * from "./linear-gradient";
 export * from "./gradient";
 export * from "./opacity";
@@ -32,6 +33,7 @@ export * from "./text-shadow";
 export * from "./text-align";
 export * from "./text-decoration";
 export * from "./text-overflow";
+export * from "./text-shadow";
 export * from "./rect";
 export * from "./radius";
 export * from "./edge-insets";

packages/reflect-core/lib/letter-spacing/index.ts

@@ -0,0 +1,27 @@
+/**
+ * css: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
+ *
+ * flutter: https://api.flutter.dev/flutter/painting/TextStyle/letterSpacing.html
+ *
+ * flutter letter spacing unit is pixel phttps://github.com/flutter/flutter/blob/18116933e7/packages/flutter/lib/src/painting/text_style.dart#L592
+ *
+ * figma: `type LetterSpacing = {
+ *  value: number;
+ *  unit: "PIXELS" | "PERCENT";
+ * };
+ */
+
+/**
+ * css supports various units, flutter only supports px.
+ * However, the figma we currently support supports pixels and percent,
+ * so only two units are used.
+ *
+ * In the future, what is used as DimensionLength will also be converted and integrated into the following format.
+ */
+
+type Unit = "PIXELS" | "PERCENT";
+
+export type LetterSpacing = {
+    value: number;
+    unit: Unit;
+};

packages/reflect-core/lib/text-shadow/text-shadow.manifest.ts

@@ -1,17 +1,28 @@
 import { Color } from "../color";
 import { Offset } from "../offset";
-import { BlendMode } from "../cg/filters";
-import { RGBA } from "../color";
-import { Vector } from "../uiutils/types";
 
 /**
+ *
+ * [css](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+ *
+ * [flutter](https://api.flutter.dev/flutter/dart-ui/Shadow-class.html)
+ *
+ * [w3](https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow)
+ *
+ * figma: https://www.figma.com/plugin-docs/api/Effect/#dropshadoweffect
+ *
  * Currently not supporting inner shadow
+ *
  */
+
 export interface TextShadow {
     color: Color;
     offset: Offset;
     blurRadius: number;
-    spreadRadius: number;
+    /**
+     * According to W3C, `geometry of a glyph is not so simple as a box`.It is likely to be added later.
+     */
+    spreadRadius?: number;
 }
 
 export type TextShadowManifest = TextShadow;

packages/reflect-core/lib/text-style/text-style.manifest.ts

@@ -1,5 +1,4 @@
-import { LetterSpacing } from "@design-sdk/figma-types";
-import { DimensionLength, TextShadowManifest } from "..";
+import { DimensionLength, TextShadowManifest, LetterSpacing } from "..";
 import { ColorManifest } from "../color";
 import { FontStyleManifest } from "../font-style";
 import { FontWeightManifest } from "../font-weight";
@@ -62,6 +61,13 @@ export interface ITextStyle {
     lineHeight?: DimensionLength;
     // endregion spacing related
 
+    /**
+     * textShadow supports multiple shadows in css and flutter.
+     *
+     * [css](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+     *
+     * [flutter](https://api.flutter.dev/flutter/painting/TextStyle/shadows.html)
+     */
     textShadow?: TextShadowManifest[];
 }
 

packages/reflect-core/lib/text-style/text-style.ts

@@ -1,9 +1,10 @@
-import { LetterSpacing } from "@design-sdk/figma-types";
+import { LetterSpacing } from "../letter-spacing";
 import { DimensionLength } from "..";
 import { Color, Colors } from "../color";
 import { FontStyle } from "../font-style";
 import { FontWeight } from "../font-weight";
 import { TextDecoration, TextDecorationStyle } from "../text-decoration";
+import { TextShadow } from "../text-shadow";
 import { ITextStyle as ITextStyle } from "./text-style.manifest";
 export class TextStyle implements ITextStyle {
     fontFamily: string;
@@ -18,6 +19,7 @@ export class TextStyle implements ITextStyle {
     letterSpacing: LetterSpacing;
     wordSpacing?: number;
     lineHeight: DimensionLength;
+    textShadow: TextShadow[];
 
     constructor({
         fontFamily,
@@ -32,6 +34,7 @@ export class TextStyle implements ITextStyle {
         letterSpacing,
         wordSpacing,
         lineHeight,
+        textShadow,
     }: ITextStyle) {
         this.fontFamily = fontFamily;
         this.fontWeight = fontWeight;
@@ -45,5 +48,6 @@ export class TextStyle implements ITextStyle {
         this.letterSpacing = letterSpacing;
         this.wordSpacing = wordSpacing;
         this.lineHeight = lineHeight;
+        this.textShadow = textShadow;
     }
 }