@seed-design/react 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/components/ImageFrame/ImageFrame.cjs +7 -8
  2. package/lib/components/ImageFrame/ImageFrame.d.ts +0 -3
  3. package/lib/components/ImageFrame/ImageFrame.d.ts.map +1 -1
  4. package/lib/components/ImageFrame/ImageFrame.js +7 -8
  5. package/lib/components/ScrollFog/ScrollFog.cjs +1 -2
  6. package/lib/components/ScrollFog/ScrollFog.d.ts.map +1 -1
  7. package/lib/components/ScrollFog/ScrollFog.js +4 -5
  8. package/package.json +1 -1
  9. package/src/components/ImageFrame/ImageFrame.tsx +4 -12
  10. package/src/components/ScrollFog/ScrollFog.tsx +2 -11
package/lib/components/ImageFrame/ImageFrame.cjs CHANGED
@@ -18,7 +18,6 @@ let _seed_design_css_recipes_image_frame = require("@seed-design/css/recipes/ima
18
18
  let _seed_design_css_recipes_image_frame_icon = require("@seed-design/css/recipes/image-frame-icon");
19
19
  let _seed_design_css_recipes_image_frame_indicator = require("@seed-design/css/recipes/image-frame-indicator");
20
20
  let _seed_design_css_recipes_image_frame_reaction_button = require("@seed-design/css/recipes/image-frame-reaction-button");
21
- let _seed_design_css_vars_component = require("@seed-design/css/vars/component");
22
21
  //#region src/components/ImageFrame/ImageFrame.tsx
23
22
  var ImageFrame = react.forwardRef(({ ratio = 4 / 3, src, alt, fallback, className, loading, decoding, crossOrigin, referrerPolicy, sizes, srcSet, onLoad, onError, borderRadius = "r2", children, ...rest }, ref) => {
24
23
  const [variantProps, restProps] = _seed_design_css_recipes_image_frame.imageFrame.splitVariantProps(rest);
@@ -57,11 +56,8 @@ var ImageFrame = react.forwardRef(({ ratio = 4 / 3, src, alt, fallback, classNam
57
56
  ImageFrame.displayName = "ImageFrame";
58
57
  /**
59
58
  * ImageFrame 내에서 오버레이 요소를 배치하기 위한 컴포넌트
60
- *
61
- * @remarks
62
- * offsetX, offsetY 기본값은 rootage 스펙(image-frame-floater)에서 가져옵니다.
63
59
  */
64
- var ImageFrameFloater = react.forwardRef(({ offsetX = _seed_design_css_vars_component.imageFrameFloater.base.enabled.root.offset, offsetY = _seed_design_css_vars_component.imageFrameFloater.base.enabled.root.offset, ...rest }, ref) => {
60
+ var ImageFrameFloater = react.forwardRef(({ offsetX = "x1_5", offsetY = "x1_5", ...rest }, ref) => {
65
61
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Float.Float, {
66
62
  ref,
67
63
  offsetX,
@@ -125,7 +121,7 @@ var HeartFillSvg = (props) => {
125
121
  }) })]
126
122
  });
127
123
  };
128
- var HeartLineSvg = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
124
+ var HeartLineSvg = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
129
125
  width: "100%",
130
126
  height: "100%",
131
127
  viewBox: "8 9 24 24",
@@ -133,12 +129,15 @@ var HeartLineSvg = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg",
133
129
  xmlns: "http://www.w3.org/2000/svg",
134
130
  "aria-hidden": "true",
135
131
  ...props,
136
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
132
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
133
+ d: HeartFillPath,
134
+ fill: "#0000004c"
135
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
137
136
  fillRule: "evenodd",
138
137
  clipRule: "evenodd",
139
138
  d: HeartOutlineStrokePath,
140
139
  fill: "currentColor"
141
- })
140
+ })]
142
141
  });
143
142
  var ReactionButtonIcon = () => {
144
143
  const { pressed, stateProps } = (0, _seed_design_react_toggle.useToggleContext)();
package/lib/components/ImageFrame/ImageFrame.d.ts CHANGED
@@ -26,9 +26,6 @@ export interface ImageFrameFloaterProps extends FloatProps {
26
26
  }
27
27
  /**
28
28
  * ImageFrame 내에서 오버레이 요소를 배치하기 위한 컴포넌트
29
- *
30
- * @remarks
31
- * offsetX, offsetY 기본값은 rootage 스펙(image-frame-floater)에서 가져옵니다.
32
29
  */
33
30
  export declare const ImageFrameFloater: React.ForwardRefExoticComponent<ImageFrameFloaterProps & React.RefAttributes<HTMLDivElement>>;
34
31
  export interface ImageFrameBadgeProps extends BadgeProps {
package/lib/components/ImageFrame/ImageFrame.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageFrame.d.ts","sourceRoot":"","sources":["../../../src/components/ImageFrame/ImageFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,gDAAgD,CAAC;AAKxD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AAExF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMxD,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAC1E,sBAAsB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,EAAE,CAAC;IACnD,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,UAAU,wFAsDtB,CAAC;AAMF,MAAM,WAAW,sBAAuB,SAAQ,UAAU;CAAG;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,+FAW7B,CAAC;AAMF,MAAM,WAAW,oBAAqB,SAAQ,UAAU;CAAG;AAE3D,eAAO,MAAM,eAAe,8FAI3B,CAAC;AAMF,MAAM,WAAW,mBACf,SAAQ,0BAA0B,EAChC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzD,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,6FAQ1B,CAAC;AAMF,MAAM,WAAW,wBACf,SAAQ,+BAA+B,EACrC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,kGAQ/B,CAAC;AAiEF,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAYxD,eAAO,MAAM,wBAAwB,yGAanC,CAAC"}
1
+ {"version":3,"file":"ImageFrame.d.ts","sourceRoot":"","sources":["../../../src/components/ImageFrame/ImageFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,gDAAgD,CAAC;AAIxD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AAExF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMxD,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAC1E,sBAAsB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,EAAE,CAAC;IACnD,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,UAAU,wFAsDtB,CAAC;AAMF,MAAM,WAAW,sBAAuB,SAAQ,UAAU;CAAG;AAE7D;;GAEG;AACH,eAAO,MAAM,iBAAiB,+FAI7B,CAAC;AAMF,MAAM,WAAW,oBAAqB,SAAQ,UAAU;CAAG;AAE3D,eAAO,MAAM,eAAe,8FAI3B,CAAC;AAMF,MAAM,WAAW,mBACf,SAAQ,0BAA0B,EAChC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzD,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,6FAQ1B,CAAC;AAMF,MAAM,WAAW,wBACf,SAAQ,+BAA+B,EACrC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,kGAQ/B,CAAC;AAoEF,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAYxD,eAAO,MAAM,wBAAwB,yGAanC,CAAC"}
package/lib/components/ImageFrame/ImageFrame.js CHANGED
@@ -15,7 +15,6 @@ import { imageFrame } from "@seed-design/css/recipes/image-frame";
15
15
  import { imageFrameIcon } from "@seed-design/css/recipes/image-frame-icon";
16
16
  import { imageFrameIndicator } from "@seed-design/css/recipes/image-frame-indicator";
17
17
  import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-reaction-button";
18
- import { imageFrameFloater } from "@seed-design/css/vars/component";
19
18
  //#region src/components/ImageFrame/ImageFrame.tsx
20
19
  var ImageFrame = React$1.forwardRef(({ ratio = 4 / 3, src, alt, fallback, className, loading, decoding, crossOrigin, referrerPolicy, sizes, srcSet, onLoad, onError, borderRadius = "r2", children, ...rest }, ref) => {
21
20
  const [variantProps, restProps] = imageFrame.splitVariantProps(rest);
@@ -54,11 +53,8 @@ var ImageFrame = React$1.forwardRef(({ ratio = 4 / 3, src, alt, fallback, classN
54
53
  ImageFrame.displayName = "ImageFrame";
55
54
  /**
56
55
  * ImageFrame 내에서 오버레이 요소를 배치하기 위한 컴포넌트
57
- *
58
- * @remarks
59
- * offsetX, offsetY 기본값은 rootage 스펙(image-frame-floater)에서 가져옵니다.
60
56
  */
61
- var ImageFrameFloater = React$1.forwardRef(({ offsetX = imageFrameFloater.base.enabled.root.offset, offsetY = imageFrameFloater.base.enabled.root.offset, ...rest }, ref) => {
57
+ var ImageFrameFloater = React$1.forwardRef(({ offsetX = "x1_5", offsetY = "x1_5", ...rest }, ref) => {
62
58
  return /* @__PURE__ */ jsx(Float, {
63
59
  ref,
64
60
  offsetX,
@@ -122,7 +118,7 @@ var HeartFillSvg = (props) => {
122
118
  }) })]
123
119
  });
124
120
  };
125
- var HeartLineSvg = (props) => /* @__PURE__ */ jsx("svg", {
121
+ var HeartLineSvg = (props) => /* @__PURE__ */ jsxs("svg", {
126
122
  width: "100%",
127
123
  height: "100%",
128
124
  viewBox: "8 9 24 24",
@@ -130,12 +126,15 @@ var HeartLineSvg = (props) => /* @__PURE__ */ jsx("svg", {
130
126
  xmlns: "http://www.w3.org/2000/svg",
131
127
  "aria-hidden": "true",
132
128
  ...props,
133
- children: /* @__PURE__ */ jsx("path", {
129
+ children: [/* @__PURE__ */ jsx("path", {
130
+ d: HeartFillPath,
131
+ fill: "#0000004c"
132
+ }), /* @__PURE__ */ jsx("path", {
134
133
  fillRule: "evenodd",
135
134
  clipRule: "evenodd",
136
135
  d: HeartOutlineStrokePath,
137
136
  fill: "currentColor"
138
- })
137
+ })]
139
138
  });
140
139
  var ReactionButtonIcon = () => {
141
140
  const { pressed, stateProps } = useToggleContext();
package/lib/components/ScrollFog/ScrollFog.cjs CHANGED
@@ -4,10 +4,9 @@ let clsx = require("clsx");
4
4
  clsx = require_runtime.__toESM(clsx);
5
5
  let react = require("react");
6
6
  let react_jsx_runtime = require("react/jsx-runtime");
7
- let _seed_design_css_vars_component = require("@seed-design/css/vars/component");
8
7
  let _seed_design_css_recipes_scroll_fog = require("@seed-design/css/recipes/scroll-fog");
9
8
  //#region src/components/ScrollFog/ScrollFog.tsx
10
- var ScrollFog = (0, react.forwardRef)(({ className, hideScrollBar, placement = ["top", "bottom"], size = _seed_design_css_vars_component.scrollFog.base.enabled.root.size, sizes, style, ...props }, ref) => {
9
+ var ScrollFog = (0, react.forwardRef)(({ className, hideScrollBar, placement = ["top", "bottom"], size = 20, sizes, style, ...props }, ref) => {
11
10
  const [variantProps, restProps] = _seed_design_css_recipes_scroll_fog.scrollFog.splitVariantProps({
12
11
  hideScrollBar,
13
12
  ...props
package/lib/components/ScrollFog/ScrollFog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollFog.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/ScrollFog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAK5F,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,qBAAqB,EAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAE9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2GAqDrB,CAAC"}
1
+ {"version":3,"file":"ScrollFog.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/ScrollFog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAI5F,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,qBAAqB,EAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAE9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2GA6CrB,CAAC"}
package/lib/components/ScrollFog/ScrollFog.js CHANGED
@@ -2,15 +2,14 @@
2
2
  import clsx$1 from "clsx";
3
3
  import { forwardRef, useMemo } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
5
- import { scrollFog } from "@seed-design/css/vars/component";
6
- import { scrollFog as scrollFog$1 } from "@seed-design/css/recipes/scroll-fog";
5
+ import { scrollFog } from "@seed-design/css/recipes/scroll-fog";
7
6
  //#region src/components/ScrollFog/ScrollFog.tsx
8
- var ScrollFog = forwardRef(({ className, hideScrollBar, placement = ["top", "bottom"], size = scrollFog.base.enabled.root.size, sizes, style, ...props }, ref) => {
9
- const [variantProps, restProps] = scrollFog$1.splitVariantProps({
7
+ var ScrollFog = forwardRef(({ className, hideScrollBar, placement = ["top", "bottom"], size = 20, sizes, style, ...props }, ref) => {
8
+ const [variantProps, restProps] = scrollFog.splitVariantProps({
10
9
  hideScrollBar,
11
10
  ...props
12
11
  });
13
- const scrollFogClassName = scrollFog$1(variantProps);
12
+ const scrollFogClassName = scrollFog(variantProps);
14
13
  const sizePx = typeof size === "number" ? `${size}px` : size;
15
14
  const sizeStyle = useMemo(() => {
16
15
  const finalSizes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/src/components/ImageFrame/ImageFrame.tsx CHANGED
@@ -11,7 +11,6 @@ import {
11
11
  type ImageFrameIndicatorVariantProps,
12
12
  } from "@seed-design/css/recipes/image-frame-indicator";
13
13
  import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-reaction-button";
14
- import { imageFrameFloater as floaterVars } from "@seed-design/css/vars/component";
15
14
  import { mergeProps } from "@seed-design/dom-utils";
16
15
  import { Image } from "@seed-design/react-image";
17
16
  import { Toggle as TogglePrimitive, useToggleContext } from "@seed-design/react-toggle";
@@ -107,19 +106,9 @@ export interface ImageFrameFloaterProps extends FloatProps {}
107
106
 
108
107
  /**
109
108
  * ImageFrame 내에서 오버레이 요소를 배치하기 위한 컴포넌트
110
- *
111
- * @remarks
112
- * offsetX, offsetY 기본값은 rootage 스펙(image-frame-floater)에서 가져옵니다.
113
109
  */
114
110
  export const ImageFrameFloater = React.forwardRef<HTMLDivElement, ImageFrameFloaterProps>(
115
- (
116
- {
117
- offsetX = floaterVars.base.enabled.root.offset,
118
- offsetY = floaterVars.base.enabled.root.offset,
119
- ...rest
120
- },
121
- ref,
122
- ) => {
111
+ ({ offsetX = "x1_5", offsetY = "x1_5", ...rest }, ref) => {
123
112
  return <Float ref={ref} offsetX={offsetX} offsetY={offsetY} {...rest} />;
124
113
  },
125
114
  );
@@ -217,6 +206,7 @@ const HeartFillSvg = (props: React.SVGAttributes<SVGSVGElement>) => {
217
206
  y2="10.5391"
218
207
  gradientUnits="userSpaceOnUse"
219
208
  >
209
+ {/* NOTE: see image-frame-reaction-button.yaml for the colors */}
220
210
  <stop stopColor="#FF9A56" />
221
211
  <stop offset="1" stopColor="#FF6600" />
222
212
  </linearGradient>
@@ -235,6 +225,8 @@ const HeartLineSvg = (props: React.SVGAttributes<SVGSVGElement>) => (
235
225
  aria-hidden="true"
236
226
  {...props}
237
227
  >
228
+ {/* NOTE: see image-frame-reaction-button.yaml for the color */}
229
+ <path d={HeartFillPath} fill="#0000004c" />
238
230
  <path fillRule="evenodd" clipRule="evenodd" d={HeartOutlineStrokePath} fill="currentColor" />
239
231
  </svg>
240
232
  );
package/src/components/ScrollFog/ScrollFog.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { scrollFog, type ScrollFogVariantProps } from "@seed-design/css/recipes/scroll-fog";
2
2
  import clsx from "clsx";
3
3
  import { forwardRef, useMemo } from "react";
4
- import { scrollFog as vars } from "@seed-design/css/vars/component";
5
4
 
6
5
  type ScrollPlacement = "top" | "bottom" | "left" | "right";
7
6
 
@@ -35,15 +34,7 @@ export interface ScrollFogProps
35
34
 
36
35
  export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
37
36
  (
38
- {
39
- className,
40
- hideScrollBar,
41
- placement = ["top", "bottom"],
42
- size = vars.base.enabled.root.size,
43
- sizes,
44
- style,
45
- ...props
46
- },
37
+ { className, hideScrollBar, placement = ["top", "bottom"], size = 20, sizes, style, ...props },
47
38
  ref,
48
39
  ) => {
49
40
  const [variantProps, restProps] = scrollFog.splitVariantProps({
@@ -51,7 +42,7 @@ export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
51
42
  ...props,
52
43
  });
53
44
  const scrollFogClassName = scrollFog(variantProps);
54
- const sizePx = typeof size === "number" ? `${size}px` : size;
45
+ const sizePx = typeof size === "number" ? `${size}px` : size; // TODO: redundant typeof?
55
46
 
56
47
  const sizeStyle = useMemo(() => {
57
48
  const finalSizes = {