support text shadow

docs/figma-text-shadow.md

@@ -0,0 +1,48 @@
+# Figma text shadow
+
+The text shadow is handled as the shadow of the effect from figma.
+
+![](https://static.figma.com/uploads/9def6cce093b164306328ee228028155d13d72d0)
+
+[figma DropShadowEffect](https://www.figma.com/plugin-docs/api/Effect/#dropshadoweffect)
+
+[W3C](https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow)
+
+## drop-shadow
+
+**css**
+
+- [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+
+**syntax**
+
+1. offsetX offsetY blurRadius color
+2. color offsetX offsetY blurRadius
+3. offsetX offsetY color
+4. color offsetX offsetY
+
+```css
+text-shadow: 1px 1px 2px #ff2;
+text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
+```
+
+**flutter**
+
+- [`Shadow`](https://api.flutter.dev/flutter/dart-ui/Shadow-class.html)
+
+```dart
+Shadow(
+  offset: Offset(10.0, 10.0),
+  blurRadius: 3.0,
+  color: Color.fromARGB(255, 0, 0, 0),
+)
+```
+
+### inner-shadow
+
+It is not currently supported, and it appears to be replaced with drop-shadow.
+
+## Why text shadow isn't support `spread radius`?
+
+The spread radius, the 4th arg of box shadow, is not supported by text shadow. According to W3C,
+It says `geometry of a glyph is not so simple as a box`. It is likely to be added later.

editor/pages/figma/inspect-raw.tsx

@@ -15,7 +15,6 @@ export default function InspectRaw() {
   }
   const { node, reflect, raw, remote, figma } = design;
   //
-
   return (
     <>
       <MonacoEditor

packages/builder-css-styles/index.ts

@@ -8,6 +8,7 @@ export * from "./dimensions";
 export * from "./font-weight";
 export * from "./font-family";
 export * from "./text-decoration";
+export * from "./text-shadow";
 export * from "./gradient";
 export * from "./padding";
 export * from "./position";

packages/builder-css-styles/length/index.ts

@@ -12,6 +12,11 @@ export function length(d: DimensionLength | string, a?: Axis) {
   }
 
   if (typeof d === "string") {
+    // To handle cases such as "0%"
+    const extractNum = d.replace(/[^0-9]/, "");
+    if (parseInt(extractNum) === 0) {
+      return;
+    }
     if (d === "match-screen-size") {
       switch (a) {
         case Axis.horizontal:

packages/builder-css-styles/text-shadow/index.ts

@@ -0,0 +1,17 @@
+import { TextShadowManifest } from "@reflect-ui/core";
+import { color } from "../color";
+import { px } from "../dimensions";
+
+export function textShadow(ts: TextShadowManifest[]): string {
+  if (ts.length === 0) {
+    return;
+  }
+
+  const res = ts.map((shadow) => {
+    return `${px(shadow.offset.dx)} ${px(shadow.offset.dy)} ${px(
+      shadow.blurRadius
+    )} ${color(shadow.color)}`;
+  });
+
+  return res.toString();
+}

packages/builder-web-core/widgets-native/html-text-span/index.ts

@@ -64,6 +64,7 @@ export class Text extends TextChildWidget {
       "line-height": css.length(this.textStyle.lineHeight),
       "text-align": this.textAlign,
       "text-decoration": css.textDecoration(this.textStyle.decoration),
+      "text-shadow": css.textShadow(this.textStyle.textShadow),
       // ------------------------------------------
       "min-height": css.px(this.height),
       // TODO: do not specify width when parent is a flex container.

packages/designto-code/package.json

@@ -10,7 +10,7 @@
     "@designto/web": "0.0.0",
     "@design-sdk/universal": "0.0.0",
     "@reflect-ui/detection": "0.1.1",
-    "@flutter-builder/flutter": "2.5.0-f13"
+    "@flutter-builder/flutter": "2.5.0-f16"
   },
   "files": [
     "README.md",

packages/designto-flutter/dart-ui/dart-ui-shadow.ts

@@ -0,0 +1,32 @@
+import * as flutter from "@flutter-builder/flutter";
+import * as dartui from ".";
+import { roundNumber } from "@reflect-ui/uiutils";
+import { TextShadowManifest } from "@reflect-ui/core";
+
+export function shadow(
+  shadows: ReadonlyArray<TextShadowManifest>
+): Array<flutter.Shadow> {
+  // if no shadow filtered available, return undefined
+  if (shadows.length == 0) {
+    return undefined;
+  }
+
+  const _shadows = shadows.map((d: TextShadowManifest) => {
+    return new flutter.Shadow({
+      color: dartui.color(d.color),
+      blurRadius: requiredNumber(d.blurRadius),
+      offset: dartui.offset(d.offset),
+    });
+  });
+
+  // return undefined if array is empty, since it's not needed.
+  return _shadows.length > 0 ? _shadows : undefined;
+}
+
+function requiredNumber(number: number): number {
+  const rounded = roundNumber(number);
+  if (rounded == 0) {
+    return undefined;
+  }
+  return rounded;
+}

packages/designto-flutter/dart-ui/index.ts

@@ -2,4 +2,5 @@ export * from "./dart-ui-clip";
 export * from "./dart-ui-color";
 export * from "./dart-ui-offset";
 export * from "./dart-ui-radius";
+export * from "./dart-ui-shadow";
 export * from "./dart-ui-text-align";

packages/designto-flutter/painting/painting-box-shadow.ts

@@ -13,6 +13,10 @@ export function boxShadow(
 
   const boxShadows: Array<flutter.BoxShadow> = shadows.map(
     (d: BoxShadowManifest) => {
+      if (!d) {
+        return;
+      }
+
       return new flutter.BoxShadow({
         color: dartui.color(d.color),
         blurRadius: requiredNumber(d.blurRadius),

packages/designto-flutter/painting/painting-text-style.ts

@@ -1,4 +1,4 @@
-import type { ITextStyle } from "@reflect-ui/core";
+import type { ITextStyle, TextShadowManifest } from "@reflect-ui/core";
 import * as flutter from "@flutter-builder/flutter";
 import { textDecoration } from "./painting-text-decoration";
 import { fontStyle } from "./painting-font-style";
@@ -10,6 +10,7 @@ export function textStyle(style: ITextStyle): flutter.TextStyle {
   const { fontFamily, letterSpacing } = style;
   let decoration: flutter.TextDecoration = textDecoration(style.decoration);
   const fontWeight: flutter.FontWeight = flutter.FontWeight[style.fontWeight];
+
   return new flutter.TextStyle({
     fontSize: rd(style.fontSize),
     fontWeight: fontWeight,
@@ -19,5 +20,6 @@ export function textStyle(style: ITextStyle): flutter.TextStyle {
     letterSpacing: length.letterSpacing(style.fontSize, letterSpacing),
     height: length.multiple(style.fontSize, style.lineHeight),
     decoration: decoration,
+    shadows: dartui.shadow(style.textShadow),
   });
 }

packages/designto-token/token-text/index.ts

@@ -1,5 +1,5 @@
 import { nodes } from "@design-sdk/core";
-import { RenderedText, TextStyle } from "@reflect-ui/core";
+import { RenderedText, TextStyle, TextShadowManifest } from "@reflect-ui/core";
 import { keyFromNode } from "../key";
 
 /**
@@ -47,6 +47,7 @@ export function fromText(node: nodes.ReflectTextNode): RenderedText {
       color: node.primaryColor,
       lineHeight: node.lineHeight,
       letterSpacing: node.letterSpacing,
+      textShadow: node.shadows as TextShadowManifest[],
     }),
     ...wh,
   });

yarn.lock

@@ -1516,10 +1516,10 @@
   resolved "https://registry.yarnpkg.com/@flutter-builder/flutter-material-icons/-/flutter-material-icons-0.0.4.tgz#98fddb0f0295f99c8952c9b214c9755de7c6333e"
   integrity sha512-kfzmpVnOJysPBfvrtDuuNJZvpUoO7tGXncRi4WYtoHkmG1ll635D88Ze6OUYhaRLoT7+TXpVl0lk8CDESE/Ykw==
 
-"@flutter-builder/flutter@2.5.0-f13":
-  version "2.5.0-f13"
-  resolved "https://registry.yarnpkg.com/@flutter-builder/flutter/-/flutter-2.5.0-f13.tgz#ed7f304a7709111cdb3c9ba98752f353d7cb5bb8"
-  integrity sha512-LTL4Ng6HORj6Z7MAekr24W/IlDXbAGCFjqpaXX3zwOyqT7vx2XJmgsRqiigFrL3w/juHV4TDWDTuQjZU9USF2Q==
+"@flutter-builder/flutter@2.5.0-f16":
+  version "2.5.0-f16"
+  resolved "https://registry.yarnpkg.com/@flutter-builder/flutter/-/flutter-2.5.0-f16.tgz#ac524cc35474a2b2d5669c9976d65935694f6244"
+  integrity sha512-LHT5eOAxqc0bxPjp5lDr+RKQS2fgG2e221LlcdDlDUtuBaIwILAZYWfFQqPQeapqdrpn5+AiXzCZqx8pRX7BHQ==
   dependencies:
     "@abraham/reflection" "^0.8.0"
     "@flutter-builder/flutter-material-icons" "0.0.4"