From 23ce9db2a683675e273bf8062d51643dfbca07ee Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 19 Oct 2021 16:38:51 +0900 Subject: [PATCH 01/21] add shadow effect docs --- docs/figma-shadow-effect.md | 39 +++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 docs/figma-shadow-effect.md diff --git a/docs/figma-shadow-effect.md b/docs/figma-shadow-effect.md new file mode 100644 index 00000000..8871ef97 --- /dev/null +++ b/docs/figma-shadow-effect.md @@ -0,0 +1,39 @@ +# Figma shadow effects + +![](https://static.figma.com/uploads/9def6cce093b164306328ee228028155d13d72d0) + +[figma DropShadowEffect](https://www.figma.com/plugin-docs/api/Effect/#dropshadoweffect) + +## text + +The text shadow is handled as the shadow of the effect from figma. + +### 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), +) +``` From 970d396d822e01c36432f545f2d87c6809ca5f13 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 20 Oct 2021 15:26:52 +0900 Subject: [PATCH 02/21] add text shadow in css --- editor/pages/figma/inspect-raw.tsx | 1 - packages/builder-css-styles/index.ts | 1 + .../builder-css-styles/text-shadow/index.ts | 17 +++++++++++++++++ .../widgets-native/html-text-span/index.ts | 1 + packages/design-sdk | 2 +- packages/designto-token/token-text/index.ts | 2 ++ packages/reflect-core | 2 +- 7 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 packages/builder-css-styles/text-shadow/index.ts diff --git a/editor/pages/figma/inspect-raw.tsx b/editor/pages/figma/inspect-raw.tsx index df7a0d53..71368a85 100644 --- a/editor/pages/figma/inspect-raw.tsx +++ b/editor/pages/figma/inspect-raw.tsx @@ -15,7 +15,6 @@ export default function InspectRaw() { } const { node, reflect, raw, remote, figma } = design; // - return ( <> { + return `${px(shadow.offset.dx)} ${px(shadow.offset.dy)} ${px( + shadow.blurRadius + )} ${color(shadow.color)}`; + }); + + return res.toString(); +} diff --git a/packages/builder-web-core/widgets-native/html-text-span/index.ts b/packages/builder-web-core/widgets-native/html-text-span/index.ts index 4b15f2f7..81ccee31 100644 --- a/packages/builder-web-core/widgets-native/html-text-span/index.ts +++ b/packages/builder-web-core/widgets-native/html-text-span/index.ts @@ -53,6 +53,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. diff --git a/packages/design-sdk b/packages/design-sdk index a6ad2b5d..1070e5e1 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit a6ad2b5d60e1ee62fa2d79502ebde40220bb5d0f +Subproject commit 1070e5e18bc3637de7bc7b41aa4a9854d51799f3 diff --git a/packages/designto-token/token-text/index.ts b/packages/designto-token/token-text/index.ts index f82e66a0..33164256 100644 --- a/packages/designto-token/token-text/index.ts +++ b/packages/designto-token/token-text/index.ts @@ -1,5 +1,6 @@ import { nodes } from "@design-sdk/core"; import { Text, TextStyle } from "@reflect-ui/core"; +import { TextShadowManifest } from "@reflect-ui/core"; import { keyFromNode } from "../key"; /** @@ -47,6 +48,7 @@ export function fromText(node: nodes.ReflectTextNode): Text { color: node.primaryColor, lineHeight: node.lineHeight, letterSpacing: node.letterSpacing, + textShadow: node.shadows as TextShadowManifest[], }), ...wh, }); diff --git a/packages/reflect-core b/packages/reflect-core index e12e8925..3a2c8362 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit e12e8925ea399e7430e10e5a06dc770488b7f0d7 +Subproject commit 3a2c8362c0c88e17136587d3897e31a386d6b0a4 From 718ce9b924b58f9368f7bf3994553acd3f6887a5 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 21 Oct 2021 21:58:32 +0900 Subject: [PATCH 03/21] add text shadow without flutter --- packages/builder-css-styles/text-shadow/index.ts | 2 +- packages/design-sdk | 2 +- packages/designto-code/package.json | 2 +- .../designto-flutter/painting/painting-box-shadow.ts | 4 ++++ .../designto-flutter/painting/painting-text-style.ts | 12 +++++++++++- packages/reflect-core | 2 +- yarn.lock | 8 ++++---- 7 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/builder-css-styles/text-shadow/index.ts b/packages/builder-css-styles/text-shadow/index.ts index 7a84efb9..676370fe 100644 --- a/packages/builder-css-styles/text-shadow/index.ts +++ b/packages/builder-css-styles/text-shadow/index.ts @@ -3,7 +3,7 @@ import { color } from "../color"; import { px } from "../dimensions"; export function textShadow(ts: TextShadowManifest[]): string { - if (!ts) { + if (ts.length === 0) { return; } diff --git a/packages/design-sdk b/packages/design-sdk index 1070e5e1..1e75d96a 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 1070e5e18bc3637de7bc7b41aa4a9854d51799f3 +Subproject commit 1e75d96aaf8180de7c43fd5c6e9ce40faf336ece diff --git a/packages/designto-code/package.json b/packages/designto-code/package.json index 7c3bae28..b9b45cd1 100644 --- a/packages/designto-code/package.json +++ b/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-f15" }, "files": [ "README.md", diff --git a/packages/designto-flutter/painting/painting-box-shadow.ts b/packages/designto-flutter/painting/painting-box-shadow.ts index 5c77dee8..d7bdbe4d 100644 --- a/packages/designto-flutter/painting/painting-box-shadow.ts +++ b/packages/designto-flutter/painting/painting-box-shadow.ts @@ -13,6 +13,10 @@ export function boxShadow( const boxShadows: Array = shadows.map( (d: BoxShadowManifest) => { + if (!d) { + return; + } + return new flutter.BoxShadow({ color: dartui.color(d.color), blurRadius: requiredNumber(d.blurRadius), diff --git a/packages/designto-flutter/painting/painting-text-style.ts b/packages/designto-flutter/painting/painting-text-style.ts index b679c7b8..0196b2c8 100644 --- a/packages/designto-flutter/painting/painting-text-style.ts +++ b/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,15 @@ 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]; + const shadows = style.textShadow.map((d: TextShadowManifest) => { + return new flutter.Shadow({ + color: dartui.color(d.color), + blurRadius: rd(d.blurRadius), + spreadRadius: d.spreadRadius, + offset: dartui.offset(d.offset), + }); + }); + return new flutter.TextStyle({ fontSize: rd(style.fontSize), fontWeight: fontWeight, @@ -19,5 +28,6 @@ export function textStyle(style: ITextStyle): flutter.TextStyle { letterSpacing: multipleToDimension(style.fontSize, letterSpacing), height: multiple(style.fontSize, style.lineHeight), decoration: decoration, + shadows: shadows, }); } diff --git a/packages/reflect-core b/packages/reflect-core index 3a2c8362..7d0844aa 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 3a2c8362c0c88e17136587d3897e31a386d6b0a4 +Subproject commit 7d0844aaca059f3cb0b12ba24bb65a129990d90d diff --git a/yarn.lock b/yarn.lock index b115968a..81ddcae3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,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-f15": + version "2.5.0-f15" + resolved "https://registry.yarnpkg.com/@flutter-builder/flutter/-/flutter-2.5.0-f15.tgz#fd0e45b43ea0ff90298d166e7c969da84422ea5d" + integrity sha512-30I0Ae3qlXtl+xkW133vR5vrR8FSqvBxf6OVvr993hBDOvk9h0B7cD9XwqfK4mly+GPExfe+3g7xkAIr0Mkqsg== dependencies: "@abraham/reflection" "^0.8.0" "@flutter-builder/flutter-material-icons" "0.0.4" From cdeda66619fdef8fbf464a3f512fdbf473f6588c Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 21 Oct 2021 22:13:11 +0900 Subject: [PATCH 04/21] update reflect-core --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index 7d0844aa..2b5d2d36 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 7d0844aaca059f3cb0b12ba24bb65a129990d90d +Subproject commit 2b5d2d362784bfdd3bd9a3b9a4c77d0f5803365a From 8ebc579bb33a4ea1a92f4cda199dce2965d5423a Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 22 Oct 2021 18:43:47 +0900 Subject: [PATCH 05/21] add dart ui shadow --- .../dart-ui/dart-ui-shadow.ts | 33 +++++++++++++++++++ packages/designto-flutter/dart-ui/index.ts | 1 + .../painting/painting-text-style.ts | 10 +----- 3 files changed, 35 insertions(+), 9 deletions(-) create mode 100644 packages/designto-flutter/dart-ui/dart-ui-shadow.ts diff --git a/packages/designto-flutter/dart-ui/dart-ui-shadow.ts b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts new file mode 100644 index 00000000..7642ba6e --- /dev/null +++ b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts @@ -0,0 +1,33 @@ +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 +): Array { + // 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), + spreadRadius: undefined, + 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; +} diff --git a/packages/designto-flutter/dart-ui/index.ts b/packages/designto-flutter/dart-ui/index.ts index 77c54469..5218fb7c 100644 --- a/packages/designto-flutter/dart-ui/index.ts +++ b/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"; diff --git a/packages/designto-flutter/painting/painting-text-style.ts b/packages/designto-flutter/painting/painting-text-style.ts index 1f29d785..f88b9344 100644 --- a/packages/designto-flutter/painting/painting-text-style.ts +++ b/packages/designto-flutter/painting/painting-text-style.ts @@ -10,14 +10,6 @@ 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]; - const shadows = style.textShadow.map((d: TextShadowManifest) => { - return new flutter.Shadow({ - color: dartui.color(d.color), - blurRadius: rd(d.blurRadius), - spreadRadius: d.spreadRadius, - offset: dartui.offset(d.offset), - }); - }); return new flutter.TextStyle({ fontSize: rd(style.fontSize), @@ -28,6 +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: shadows, + shadows: dartui.shadow(style.textShadow), }); } From af4590388aae42ea88be6941db9d3f967dee3e1f Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 26 Oct 2021 18:44:12 +0900 Subject: [PATCH 06/21] update flutter-builder --- packages/designto-code/package.json | 2 +- packages/designto-flutter/dart-ui/dart-ui-shadow.ts | 1 - yarn.lock | 8 ++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/designto-code/package.json b/packages/designto-code/package.json index b9b45cd1..55192a97 100644 --- a/packages/designto-code/package.json +++ b/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-f15" + "@flutter-builder/flutter": "2.5.0-f16" }, "files": [ "README.md", diff --git a/packages/designto-flutter/dart-ui/dart-ui-shadow.ts b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts index 7642ba6e..1c51dbb2 100644 --- a/packages/designto-flutter/dart-ui/dart-ui-shadow.ts +++ b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts @@ -15,7 +15,6 @@ export function shadow( return new flutter.Shadow({ color: dartui.color(d.color), blurRadius: requiredNumber(d.blurRadius), - spreadRadius: undefined, offset: dartui.offset(d.offset), }); }); diff --git a/yarn.lock b/yarn.lock index 81ddcae3..64b5f488 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,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-f15": - version "2.5.0-f15" - resolved "https://registry.yarnpkg.com/@flutter-builder/flutter/-/flutter-2.5.0-f15.tgz#fd0e45b43ea0ff90298d166e7c969da84422ea5d" - integrity sha512-30I0Ae3qlXtl+xkW133vR5vrR8FSqvBxf6OVvr993hBDOvk9h0B7cD9XwqfK4mly+GPExfe+3g7xkAIr0Mkqsg== +"@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" From fc56f3f61327e2ef44e23dc61d42f140d79731b8 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 28 Oct 2021 22:18:06 +0900 Subject: [PATCH 07/21] update packages --- packages/design-sdk | 2 +- packages/reflect-core | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-sdk b/packages/design-sdk index 1e75d96a..1596c61b 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 1e75d96aaf8180de7c43fd5c6e9ce40faf336ece +Subproject commit 1596c61b93ca08bad489bb074c768d1b19cb3a57 diff --git a/packages/reflect-core b/packages/reflect-core index 2b5d2d36..3db95c32 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 2b5d2d362784bfdd3bd9a3b9a4c77d0f5803365a +Subproject commit 3db95c32b908456a834571ed3e5e12282e6a6e9c From 831de31ea58692320350ee2c36c7ef7bd1233efc Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 29 Oct 2021 11:38:31 +0900 Subject: [PATCH 08/21] update reflect core letterspacing type --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index 3db95c32..bdc8a243 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 3db95c32b908456a834571ed3e5e12282e6a6e9c +Subproject commit bdc8a2437e33e486f93ef2805c52905b26384966 From 911a61d06332cce91b3e4a17a38a14aa1aae2108 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 4 Nov 2021 00:49:51 +0900 Subject: [PATCH 09/21] update text shadow docs --- ...{figma-shadow-effect.md => figma-text-shadow.md} | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) rename docs/{figma-shadow-effect.md => figma-text-shadow.md} (68%) diff --git a/docs/figma-shadow-effect.md b/docs/figma-text-shadow.md similarity index 68% rename from docs/figma-shadow-effect.md rename to docs/figma-text-shadow.md index 8871ef97..06b0f155 100644 --- a/docs/figma-shadow-effect.md +++ b/docs/figma-text-shadow.md @@ -1,14 +1,16 @@ -# Figma shadow effects +# Figma text shadow + + ![](https://static.figma.com/uploads/9def6cce093b164306328ee228028155d13d72d0) [figma DropShadowEffect](https://www.figma.com/plugin-docs/api/Effect/#dropshadoweffect) -## text +[W3C](https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow) The text shadow is handled as the shadow of the effect from figma. -### drop-shadow +## drop-shadow **css** @@ -37,3 +39,8 @@ Shadow( color: Color.fromARGB(255, 0, 0, 0), ) ``` + +## 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. From 1dfbf83a0feaab547cf209aa10c9e542d234fc1c Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 5 Nov 2021 18:41:33 +0900 Subject: [PATCH 10/21] fix typo and remove comment --- docs/figma-text-shadow.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/figma-text-shadow.md b/docs/figma-text-shadow.md index 06b0f155..e00f19e1 100644 --- a/docs/figma-text-shadow.md +++ b/docs/figma-text-shadow.md @@ -1,6 +1,6 @@ # Figma text shadow - +The text shadow is handled as the shadow of the effect from figma. ![](https://static.figma.com/uploads/9def6cce093b164306328ee228028155d13d72d0) @@ -8,8 +8,6 @@ [W3C](https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow) -The text shadow is handled as the shadow of the effect from figma. - ## drop-shadow **css** From 23a6d996e10d64dc1e8b2b7a14763dfc6a458949 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 5 Nov 2021 19:59:05 +0900 Subject: [PATCH 11/21] update relfect-core --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index bdc8a243..32429143 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit bdc8a2437e33e486f93ef2805c52905b26384966 +Subproject commit 324291435f7a4ce0bbbe91400659161238018483 From 9d9142b53f7234abc3173afa469698e5a8b29375 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 5 Nov 2021 22:00:46 +0900 Subject: [PATCH 12/21] add handle like 0% in length --- packages/builder-css-styles/length/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/builder-css-styles/length/index.ts b/packages/builder-css-styles/length/index.ts index 0c01fd47..a9229fd9 100644 --- a/packages/builder-css-styles/length/index.ts +++ b/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: From 79254c41eed74e9de007686690c3023240b2bb1c Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 5 Nov 2021 22:56:04 +0900 Subject: [PATCH 13/21] update docs --- docs/figma-text-shadow.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/figma-text-shadow.md b/docs/figma-text-shadow.md index e00f19e1..85a0eef4 100644 --- a/docs/figma-text-shadow.md +++ b/docs/figma-text-shadow.md @@ -38,6 +38,10 @@ Shadow( ) ``` +### 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, From 8075681d4900e98160e5581e4cf0272fb2ebf31b Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 01:51:54 +0900 Subject: [PATCH 14/21] update design-sdk --- packages/design-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-sdk b/packages/design-sdk index 1596c61b..9dd08004 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 1596c61b93ca08bad489bb074c768d1b19cb3a57 +Subproject commit 9dd08004707bccafa149308cf3b497e27961edf8 From 7026d43256a6ceeeeb1d2edb8958b2f86de68492 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 04:51:14 +0900 Subject: [PATCH 15/21] update reflect core --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index 32429143..c512e7bf 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 324291435f7a4ce0bbbe91400659161238018483 +Subproject commit c512e7bf2c866409b512d65e3f54dbe3820d2418 From cbb2355ce55c344664fab097b72ff88f2786ff19 Mon Sep 17 00:00:00 2001 From: Universe Date: Sat, 6 Nov 2021 05:19:20 +0900 Subject: [PATCH 16/21] Add more context in `Why text shadow isn't support spread radius?` docs --- docs/figma-text-shadow.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/figma-text-shadow.md b/docs/figma-text-shadow.md index 85a0eef4..46405b4a 100644 --- a/docs/figma-text-shadow.md +++ b/docs/figma-text-shadow.md @@ -44,5 +44,15 @@ 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. +W3 describes why there is not current spread property support for text-shadow, thous we can expect this to be supported in the future. Yet other platform such as Flutter also has no spread support + +_from w3's Text Shadows: the text-shadow property_ +> Also unlike box-shadow, the spread distance is strictly interpreted as outset distance from any point of the glyph outline, and therefore, similar to the blur radius, creates rounded, rather than sharp, corners. +> Note: The painting order of shadows defined here is the opposite of that defined in the 1998 CSS2 Recommendation. +> The text-shadow property applies to both the ::first-line and ::first-letter pseudo-elements. +> Level 4 adds a spread radius argument to text-shadow, using the same syntax and interpretation as for box-shadow, except that corners are always rounded (since the geometry of a glyph is not so simple as a box). + + +More about Shadow on text in core CG Level +- [Open question - Stackoverflow: Why TextShadow has no spread signature](https://stackoverflow.com/questions/69809872/why-doesnt-text-shadow-support-spared-radius) +- [SkiaSharp reference](https://docs.microsoft.com/en-us/dotnet/api/skiasharp.skimagefilter.createdropshadow?view=skiasharp-2.80.2) From 122ac1ed0d22eab3b72e5579c9d74bbde5237555 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 05:26:54 +0900 Subject: [PATCH 17/21] add dart-ui/Shadow-class link comment s --- packages/designto-flutter/dart-ui/dart-ui-shadow.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/designto-flutter/dart-ui/dart-ui-shadow.ts b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts index 1c51dbb2..69ecdb70 100644 --- a/packages/designto-flutter/dart-ui/dart-ui-shadow.ts +++ b/packages/designto-flutter/dart-ui/dart-ui-shadow.ts @@ -3,6 +3,11 @@ import * as dartui from "."; import { roundNumber } from "@reflect-ui/uiutils"; import { TextShadowManifest } from "@reflect-ui/core"; +/** + * README + * https://api.flutter.dev/flutter/dart-ui/Shadow-class.html + */ + export function shadow( shadows: ReadonlyArray ): Array { From bbfb6114382541084d19c4c307e716aef7e98825 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 05:57:41 +0900 Subject: [PATCH 18/21] update reflect-core --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index c512e7bf..a9afb981 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit c512e7bf2c866409b512d65e3f54dbe3820d2418 +Subproject commit a9afb981964d38dfe9a392c9ea2463bb35bde09e From bcb45f96f59027696e07257667626d1f9643d412 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 05:58:59 +0900 Subject: [PATCH 19/21] update reflect-core to local --- packages/reflect-core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflect-core b/packages/reflect-core index a9afb981..76fad2f4 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit a9afb981964d38dfe9a392c9ea2463bb35bde09e +Subproject commit 76fad2f4ebb6485ab13b77e8a0a37cb7b63e36ba From 875e42f03ea0653073d5775590f2679fa6e09249 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 06:01:02 +0900 Subject: [PATCH 20/21] update design-sdk to local --- packages/design-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-sdk b/packages/design-sdk index 9dd08004..90b588f1 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 9dd08004707bccafa149308cf3b497e27961edf8 +Subproject commit 90b588f1604539d08a30fa040721bca74dac2dd8 From e8cc0ef19bf2ce8d782550e222f89f4997152bf2 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 6 Nov 2021 06:11:58 +0900 Subject: [PATCH 21/21] update yarn lock --- yarn.lock | 88 ++----------------------------------------------------- 1 file changed, 3 insertions(+), 85 deletions(-) diff --git a/yarn.lock b/yarn.lock index dc92cf7b..d289c5ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1182,7 +1182,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b" integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw== @@ -1230,15 +1230,6 @@ "@babel/helper-validator-identifier" "^7.15.7" to-fast-properties "^2.0.0" -"@base-sdk-fp/auth@0.1.0-2": - version "0.1.0-2" - resolved "https://registry.yarnpkg.com/@base-sdk-fp/auth/-/auth-0.1.0-2.tgz#9932e76d4aa7b88c8eed23cfdf0e949b581d16d4" - integrity sha512-1cnAftih+EOfE+h7QqiMDCNZfSiRfVTKQPDPeSyCIxlJVKuKDJPCuGJOJfRlQ165u3pU61saeC7ni6Q8ARuWOA== - dependencies: - "@base-sdk/core" "0.1.0-1" - axios-retry "^3.1.9" - otplib "^12.0.1" - "@base-sdk/base@0.1.0-5", "@base-sdk/base@^0.1.0-5": version "0.1.0-5" resolved "https://registry.yarnpkg.com/@base-sdk/base/-/base-0.1.0-5.tgz#3a08c23586e61147075d4b214ecd1f7934cf1292" @@ -1268,14 +1259,6 @@ "@reflect-ui/core" "0.0.2-rc.7" axios "^0.21.0" -"@base-sdk/core@0.1.0-1": - version "0.1.0-1" - resolved "https://registry.yarnpkg.com/@base-sdk/core/-/core-0.1.0-1.tgz#0cc7102a658caa2e783586f7fb705574711f0072" - integrity sha512-FRI5tUq4fr3TU5b077O9gGXrZgAll71wtc+mBPN644xVsntnluMvrbLoCRJd8z5Zp98avkbxkulX8QVoiYFn4g== - dependencies: - "@reflect-ui/core" "0.0.2-rc.7" - axios "^0.21.0" - "@base-sdk/hosting@0.1.0-1": version "0.1.0-1" resolved "https://registry.yarnpkg.com/@base-sdk/hosting/-/hosting-0.1.0-1.tgz#bf16050cadd1c766f0813bc7bb14344b28e9910d" @@ -2168,44 +2151,6 @@ dependencies: "@octokit/openapi-types" "^11.2.0" -"@otplib/core@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@otplib/core/-/core-12.0.1.tgz#73720a8cedce211fe5b3f683cd5a9c098eaf0f8d" - integrity sha512-4sGntwbA/AC+SbPhbsziRiD+jNDdIzsZ3JUyfZwjtKyc/wufl1pnSIaG4Uqx8ymPagujub0o92kgBnB89cuAMA== - -"@otplib/plugin-crypto@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@otplib/plugin-crypto/-/plugin-crypto-12.0.1.tgz#2b42c624227f4f9303c1c041fca399eddcbae25e" - integrity sha512-qPuhN3QrT7ZZLcLCyKOSNhuijUi9G5guMRVrxq63r9YNOxxQjPm59gVxLM+7xGnHnM6cimY57tuKsjK7y9LM1g== - dependencies: - "@otplib/core" "^12.0.1" - -"@otplib/plugin-thirty-two@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@otplib/plugin-thirty-two/-/plugin-thirty-two-12.0.1.tgz#5cc9b56e6e89f2a1fe4a2b38900ca4e11c87aa9e" - integrity sha512-MtT+uqRso909UkbrrYpJ6XFjj9D+x2Py7KjTO9JDPhL0bJUYVu5kFP4TFZW4NFAywrAtFRxOVY261u0qwb93gA== - dependencies: - "@otplib/core" "^12.0.1" - thirty-two "^1.0.2" - -"@otplib/preset-default@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@otplib/preset-default/-/preset-default-12.0.1.tgz#cb596553c08251e71b187ada4a2246ad2a3165ba" - integrity sha512-xf1v9oOJRyXfluBhMdpOkr+bsE+Irt+0D5uHtvg6x1eosfmHCsCC6ej/m7FXiWqdo0+ZUI6xSKDhJwc8yfiOPQ== - dependencies: - "@otplib/core" "^12.0.1" - "@otplib/plugin-crypto" "^12.0.1" - "@otplib/plugin-thirty-two" "^12.0.1" - -"@otplib/preset-v11@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@otplib/preset-v11/-/preset-v11-12.0.1.tgz#4c7266712e7230500b421ba89252963c838fc96d" - integrity sha512-9hSetMI7ECqbFiKICrNa4w70deTUfArtwXykPUvSHWOdzOlfa9ajglu7mNCntlvxycTiOAXkQGwjQCzzDEMRMg== - dependencies: - "@otplib/core" "^12.0.1" - "@otplib/plugin-crypto" "^12.0.1" - "@otplib/plugin-thirty-two" "^12.0.1" - "@pmmmwh/react-refresh-webpack-plugin@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766" @@ -3848,7 +3793,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.32.tgz#2ca61c9ef8c77f6fa1733be9e623ceb0d372ad96" integrity sha512-JcII3D5/OapPGx+eJ+Ik1SQGyt6WvuqdRfh9jUwL6/iHGjmyOriBDciBUu7lEIBTL2ijxwrR70WUnw5AEDmFvQ== -"@types/node@^15.12.1", "@types/node@^15.6.0": +"@types/node@^15.12.1": version "15.14.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa" integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A== @@ -3926,7 +3871,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^17.0.14", "@types/react@^17.0.3": +"@types/react@*", "@types/react@^17.0.3": version "17.0.34" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102" integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg== @@ -4776,14 +4721,6 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== -axios-retry@^3.1.9: - version "3.2.4" - resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.2.4.tgz#f447a53c3456f5bfeca18f20c3a3272207d082ae" - integrity sha512-Co3UXiv4npi6lM963mfnuH90/YFLKWWDmoBYfxkHT5xtkSSWNqK9zdG3fw5/CP/dsoKB5aMMJCsgab+tp1OxLQ== - dependencies: - "@babel/runtime" "^7.15.4" - is-retry-allowed "^2.2.0" - axios@0.21.4, axios@^0.21.0: version "0.21.4" resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" @@ -9661,11 +9598,6 @@ is-retry-allowed@^1.0.0: resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4" integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg== -is-retry-allowed@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz#88f34cbd236e043e71b6932d09b0c65fb7b4d71d" - integrity sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg== - is-root@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c" @@ -12035,15 +11967,6 @@ osenv@^0.1.4: os-homedir "^1.0.0" os-tmpdir "^1.0.0" -otplib@^12.0.1: - version "12.0.1" - resolved "https://registry.yarnpkg.com/otplib/-/otplib-12.0.1.tgz#c1d3060ab7aadf041ed2960302f27095777d1f73" - integrity sha512-xDGvUOQjop7RDgxTQ+o4pOol0/3xSZzawTiPKRrHnQWAy0WjhNs/5HdIDJCrqC4MBynmjXgULc6YfioaxZeFgg== - dependencies: - "@otplib/core" "^12.0.1" - "@otplib/preset-default" "^12.0.1" - "@otplib/preset-v11" "^12.0.1" - overlayscrollbars@^1.13.1: version "1.13.1" resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz#0b840a88737f43a946b9d87875a2f9e421d0338a" @@ -14958,11 +14881,6 @@ textextensions@^2.5.0: resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4" integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ== -thirty-two@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/thirty-two/-/thirty-two-1.0.2.tgz#4ca2fffc02a51290d2744b9e3f557693ca6b627a" - integrity sha1-TKL//AKlEpDSdEueP1V2k8prYno= - throat@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"