From 23768a83f61b0f1b4aaccb52f4db9549d8041e19 Mon Sep 17 00:00:00 2001 From: Mohit Thakur Date: Fri, 27 Jun 2025 13:28:22 +0000 Subject: [PATCH 1/4] feat: reduced units list in animation UI --- packages/css-data/src/__generated__/units.ts | 52 +------------------- 1 file changed, 1 insertion(+), 51 deletions(-) diff --git a/packages/css-data/src/__generated__/units.ts b/packages/css-data/src/__generated__/units.ts index 11186094a651..02ee98fcf0de 100644 --- a/packages/css-data/src/__generated__/units.ts +++ b/packages/css-data/src/__generated__/units.ts @@ -6,57 +6,7 @@ export const units = { decibel: ["db"], flex: ["fr"], frequency: ["hz", "khz"], - length: [ - "cm", - "mm", - "q", - "in", - "pt", - "pc", - "px", - "em", - "rem", - "ex", - "rex", - "cap", - "rcap", - "ch", - "rch", - "ic", - "ric", - "lh", - "rlh", - "vw", - "svw", - "lvw", - "dvw", - "vh", - "svh", - "lvh", - "dvh", - "vi", - "svi", - "lvi", - "dvi", - "vb", - "svb", - "lvb", - "dvb", - "vmin", - "svmin", - "lvmin", - "dvmin", - "vmax", - "svmax", - "lvmax", - "dvmax", - "cqw", - "cqh", - "cqi", - "cqb", - "cqmin", - "cqmax", - ], + length: ["px", "em", "rem", "vw", "vh"], resolution: ["dpi", "dpcm", "dppx", "x"], semitones: ["st"], time: ["s", "ms"], From f9b12cc955048ee69720c8078aef12eb4fbef3bf Mon Sep 17 00:00:00 2001 From: Mohit Thakur Date: Fri, 27 Jun 2025 14:45:15 +0000 Subject: [PATCH 2/4] Fix: update RANGE_UNITS and regenerate units.ts --- packages/css-data/bin/mdn-data.ts | 1 + .../css-engine/src/__generated__/types.ts | 44 ------------------ packages/sdk/src/schema/animation-schema.ts | 45 +------------------ 3 files changed, 2 insertions(+), 88 deletions(-) diff --git a/packages/css-data/bin/mdn-data.ts b/packages/css-data/bin/mdn-data.ts index 6db7ab1341a9..ec6b0f247afa 100755 --- a/packages/css-data/bin/mdn-data.ts +++ b/packages/css-data/bin/mdn-data.ts @@ -24,6 +24,7 @@ const units: Record> = { // consider % as unit percentage: ["%"], ...data.units, + length: ["%", "px", "em", "rem", "vw", "vh"], }; type Property = keyof typeof properties; diff --git a/packages/css-engine/src/__generated__/types.ts b/packages/css-engine/src/__generated__/types.ts index fe7924cbf993..9c2d58b639d9 100644 --- a/packages/css-engine/src/__generated__/types.ts +++ b/packages/css-engine/src/__generated__/types.ts @@ -689,55 +689,11 @@ export type Unit = | "fr" | "hz" | "khz" - | "cm" - | "mm" - | "q" - | "in" - | "pt" - | "pc" | "px" | "em" | "rem" - | "ex" - | "rex" - | "cap" - | "rcap" - | "ch" - | "rch" - | "ic" - | "ric" - | "lh" - | "rlh" | "vw" - | "svw" - | "lvw" - | "dvw" | "vh" - | "svh" - | "lvh" - | "dvh" - | "vi" - | "svi" - | "lvi" - | "dvi" - | "vb" - | "svb" - | "lvb" - | "dvb" - | "vmin" - | "svmin" - | "lvmin" - | "dvmin" - | "vmax" - | "svmax" - | "lvmax" - | "dvmax" - | "cqw" - | "cqh" - | "cqi" - | "cqb" - | "cqmin" - | "cqmax" | "dpi" | "dpcm" | "dppx" diff --git a/packages/sdk/src/schema/animation-schema.ts b/packages/sdk/src/schema/animation-schema.ts index 82d1c0036818..e00a8f0012b4 100644 --- a/packages/sdk/src/schema/animation-schema.ts +++ b/packages/sdk/src/schema/animation-schema.ts @@ -12,50 +12,7 @@ const literalUnion = (arr: T) => ); // Range Units -export const RANGE_UNITS = [ - "%", - "px", - "cm", - "mm", - "q", - "in", - "pt", - "pc", - "em", - "rem", - "ex", - "rex", - "cap", - "rcap", - "ch", - "rch", - "lh", - "rlh", - "vw", - "svw", - "lvw", - "dvw", - "vh", - "svh", - "lvh", - "dvh", - "vi", - "svi", - "lvi", - "dvi", - "vb", - "svb", - "lvb", - "dvb", - "vmin", - "svmin", - "lvmin", - "dvmin", - "vmax", - "svmax", - "lvmax", - "dvmax", -] as const; +export const RANGE_UNITS = ["%", "px", "em", "rem", "vw", "vh"] as const; export const rangeUnitSchema = literalUnion(RANGE_UNITS); From 5ea56df3a0843dc8fe57c02482fd81c02818010a Mon Sep 17 00:00:00 2001 From: Mohit Thakur Date: Fri, 27 Jun 2025 15:14:01 +0000 Subject: [PATCH 3/4] Limit RANGE_UNITS to % and px only --- packages/css-data/bin/mdn-data.ts | 1 - packages/css-data/src/__generated__/units.ts | 52 ++++++++++++++++++- .../css-engine/src/__generated__/types.ts | 44 ++++++++++++++++ packages/sdk/src/schema/animation-schema.ts | 2 +- 4 files changed, 96 insertions(+), 3 deletions(-) diff --git a/packages/css-data/bin/mdn-data.ts b/packages/css-data/bin/mdn-data.ts index ec6b0f247afa..6db7ab1341a9 100755 --- a/packages/css-data/bin/mdn-data.ts +++ b/packages/css-data/bin/mdn-data.ts @@ -24,7 +24,6 @@ const units: Record> = { // consider % as unit percentage: ["%"], ...data.units, - length: ["%", "px", "em", "rem", "vw", "vh"], }; type Property = keyof typeof properties; diff --git a/packages/css-data/src/__generated__/units.ts b/packages/css-data/src/__generated__/units.ts index 02ee98fcf0de..11186094a651 100644 --- a/packages/css-data/src/__generated__/units.ts +++ b/packages/css-data/src/__generated__/units.ts @@ -6,7 +6,57 @@ export const units = { decibel: ["db"], flex: ["fr"], frequency: ["hz", "khz"], - length: ["px", "em", "rem", "vw", "vh"], + length: [ + "cm", + "mm", + "q", + "in", + "pt", + "pc", + "px", + "em", + "rem", + "ex", + "rex", + "cap", + "rcap", + "ch", + "rch", + "ic", + "ric", + "lh", + "rlh", + "vw", + "svw", + "lvw", + "dvw", + "vh", + "svh", + "lvh", + "dvh", + "vi", + "svi", + "lvi", + "dvi", + "vb", + "svb", + "lvb", + "dvb", + "vmin", + "svmin", + "lvmin", + "dvmin", + "vmax", + "svmax", + "lvmax", + "dvmax", + "cqw", + "cqh", + "cqi", + "cqb", + "cqmin", + "cqmax", + ], resolution: ["dpi", "dpcm", "dppx", "x"], semitones: ["st"], time: ["s", "ms"], diff --git a/packages/css-engine/src/__generated__/types.ts b/packages/css-engine/src/__generated__/types.ts index 9c2d58b639d9..fe7924cbf993 100644 --- a/packages/css-engine/src/__generated__/types.ts +++ b/packages/css-engine/src/__generated__/types.ts @@ -689,11 +689,55 @@ export type Unit = | "fr" | "hz" | "khz" + | "cm" + | "mm" + | "q" + | "in" + | "pt" + | "pc" | "px" | "em" | "rem" + | "ex" + | "rex" + | "cap" + | "rcap" + | "ch" + | "rch" + | "ic" + | "ric" + | "lh" + | "rlh" | "vw" + | "svw" + | "lvw" + | "dvw" | "vh" + | "svh" + | "lvh" + | "dvh" + | "vi" + | "svi" + | "lvi" + | "dvi" + | "vb" + | "svb" + | "lvb" + | "dvb" + | "vmin" + | "svmin" + | "lvmin" + | "dvmin" + | "vmax" + | "svmax" + | "lvmax" + | "dvmax" + | "cqw" + | "cqh" + | "cqi" + | "cqb" + | "cqmin" + | "cqmax" | "dpi" | "dpcm" | "dppx" diff --git a/packages/sdk/src/schema/animation-schema.ts b/packages/sdk/src/schema/animation-schema.ts index e00a8f0012b4..27374cfd7f45 100644 --- a/packages/sdk/src/schema/animation-schema.ts +++ b/packages/sdk/src/schema/animation-schema.ts @@ -12,7 +12,7 @@ const literalUnion = (arr: T) => ); // Range Units -export const RANGE_UNITS = ["%", "px", "em", "rem", "vw", "vh"] as const; +export const RANGE_UNITS = ["%", "px"] as const; export const rangeUnitSchema = literalUnion(RANGE_UNITS); From f260d2e9503de914f30335b27672218c82f8916b Mon Sep 17 00:00:00 2001 From: Mohit Thakur Date: Fri, 27 Jun 2025 17:00:12 +0000 Subject: [PATCH 4/4] fix: replace dvh units with % to match reduced RANGE_UNITS --- .../props-section/animation/new-scroll-animations.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts index 33aaa3a20157..f515f0a095b9 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts @@ -25,8 +25,8 @@ const newFadeInScrollAnimation: ScrollAnimation = { description: "Fade in the element as it scrolls into view.", timing: { - rangeStart: ["start", { type: "unit", value: 0, unit: "%" }], - rangeEnd: ["start", { type: "unit", value: 50, unit: "dvh" }], + rangeStart: ["start", { type: "unit", value: 0, unit: "px" }], + rangeEnd: ["start", { type: "unit", value: 50, unit: "px" }], fill: "backwards", easing: "linear", }, @@ -45,8 +45,8 @@ const newFadeOutScrollAnimation: ScrollAnimation = { description: "Fade out the element as it scrolls out of view.", timing: { - rangeStart: ["end", { type: "unit", value: 50, unit: "dvh" }], - rangeEnd: ["end", { type: "unit", value: 0, unit: "%" }], + rangeStart: ["end", { type: "unit", value: 50, unit: "px" }], + rangeEnd: ["end", { type: "unit", value: 0, unit: "px" }], fill: "backwards", easing: "linear", },