@seed-design/lynx-css 0.9.2 → 0.10.0

package/recipes/tabs.css

@@ -51,7 +51,10 @@
 }
 .seed-tabs__triggerLabel {
     white-space: nowrap;
-    color: var(--seed-color-fg-neutral-subtle)
+    color: var(--seed-color-fg-neutral-subtle);
+    transition-property: color;
+    transition-duration: var(--seed-duration-d4);
+    transition-timing-function: var(--seed-timing-function-easing)
 }
 .seed-tabs__listContent--triggerLayout_fill {
     width: 100%;
@@ -122,6 +125,12 @@
     top: 0px;
     z-index: 1
 }
+.seed-tabs__indicator--transitionEnabled_false {
+    transition-duration: 0s
+}
+.seed-tabs__triggerLabel--transitionEnabled_false {
+    transition-duration: 0s
+}
 .seed-tabs__triggerLabel--selected_true {
     color: var(--seed-color-fg-neutral)
 }

package/recipes/tabs.d.ts

@@ -15,6 +15,10 @@ declare interface TabsVariant {
   * @default false
   */
   stickyList: boolean;
+/**
+  * @default true
+  */
+  transitionEnabled: boolean;
 selected: boolean;
 disabled: boolean;
 inCarousel: boolean;

package/recipes/tabs.mjs

@@ -44,7 +44,8 @@ const defaultVariant = {
   "triggerLayout": "fill",
   "contentLayout": "hug",
   "size": "small",
-  "stickyList": false
+  "stickyList": false,
+  "transitionEnabled": true
 };
 
 const compoundVariants = [
@@ -71,6 +72,10 @@ export const tabsVariantMap = {
     true,
     false
   ],
+  "transitionEnabled": [
+    true,
+    false
+  ],
   "selected": [
     true,
     false

package/vars/component/callout.d.ts

@@ -199,7 +199,9 @@ export declare const vars: {
   "toneMagic": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
@@ -221,7 +223,9 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/callout.mjs

@@ -169,7 +169,9 @@ export const vars = {
   "toneMagic": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
@@ -189,7 +191,9 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/image-frame-reaction-button.d.ts

@@ -10,7 +10,19 @@ export declare const vars: {
       },
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+        "gradient": {
+          "serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+          "stops": [
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 0
+            },
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 1
+            }
+          ]
+        },
         /** 보이는 버튼 크기입니다. */
         "size": "var(--seed-dimension-x6)",
         "shadow": "0px 2px 4px 0px #00000026"
@@ -25,7 +37,19 @@ export declare const vars: {
     "selected": {
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "#FF9A56 0%, #FF6600 100%"
+        "gradient": {
+          "serialized": "#FF9A56 0%, #FF6600 100%",
+          "stops": [
+            {
+              "color": "#FF9A56",
+              "position": 0
+            },
+            {
+              "color": "#FF6600",
+              "position": 1
+            }
+          ]
+        }
       },
       /** fillIcon 위로 올라가는 하트 아이콘입니다. */
       "lineIcon": {

package/vars/component/image-frame-reaction-button.mjs

@@ -6,7 +6,19 @@ export const vars = {
         "targetSize": "var(--seed-dimension-x10)"
       },
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+        "gradient": {
+          "serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+          "stops": [
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 0
+            },
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 1
+            }
+          ]
+        },
         "size": "var(--seed-dimension-x6)",
         "shadow": "0px 2px 4px 0px #00000026"
       },
@@ -17,7 +29,19 @@ export const vars = {
     },
     "selected": {
       "fillIcon": {
-        "gradient": "#FF9A56 0%, #FF6600 100%"
+        "gradient": {
+          "serialized": "#FF9A56 0%, #FF6600 100%",
+          "stops": [
+            {
+              "color": "#FF9A56",
+              "position": 0
+            },
+            {
+              "color": "#FF6600",
+              "position": 1
+            }
+          ]
+        }
       },
       "lineIcon": {
         "color": "var(--seed-color-bg-transparent)"

package/vars/component/page-banner.d.ts

@@ -353,7 +353,9 @@ export declare const vars: {
   "toneMagicVariantWeak": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
@@ -374,7 +376,9 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/page-banner.mjs

@@ -308,7 +308,9 @@ export const vars = {
   "toneMagicVariantWeak": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
@@ -328,7 +330,9 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/scroll-fog.d.ts

@@ -2,8 +2,75 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "fromColor": "#00000000",
-        "toColor": "#000000ff",
+        "gradient": {
+          "serialized": "var(--seed-gradient-fade-mask)",
+          "stops": [
+            {
+              "color": "#00000000",
+              "position": 0
+            },
+            {
+              "color": "#00000003",
+              "position": 0.08
+            },
+            {
+              "color": "#00000005",
+              "position": 0.16
+            },
+            {
+              "color": "#0000000d",
+              "position": 0.22
+            },
+            {
+              "color": "#00000014",
+              "position": 0.29
+            },
+            {
+              "color": "#00000021",
+              "position": 0.35
+            },
+            {
+              "color": "#0000002e",
+              "position": 0.41
+            },
+            {
+              "color": "#00000040",
+              "position": 0.47
+            },
+            {
+              "color": "#00000052",
+              "position": 0.53
+            },
+            {
+              "color": "#00000066",
+              "position": 0.59
+            },
+            {
+              "color": "#0000007a",
+              "position": 0.65
+            },
+            {
+              "color": "#00000094",
+              "position": 0.71
+            },
+            {
+              "color": "#000000ab",
+              "position": 0.78
+            },
+            {
+              "color": "#000000c7",
+              "position": 0.84
+            },
+            {
+              "color": "#000000e3",
+              "position": 0.92
+            },
+            {
+              "color": "#000000ff",
+              "position": 1
+            }
+          ]
+        },
         "size": "20px"
       }
     }

package/vars/component/scroll-fog.mjs

@@ -2,8 +2,75 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "fromColor": "#00000000",
-        "toColor": "#000000ff",
+        "gradient": {
+          "serialized": "var(--seed-gradient-fade-mask)",
+          "stops": [
+            {
+              "color": "#00000000",
+              "position": 0
+            },
+            {
+              "color": "#00000003",
+              "position": 0.08
+            },
+            {
+              "color": "#00000005",
+              "position": 0.16
+            },
+            {
+              "color": "#0000000d",
+              "position": 0.22
+            },
+            {
+              "color": "#00000014",
+              "position": 0.29
+            },
+            {
+              "color": "#00000021",
+              "position": 0.35
+            },
+            {
+              "color": "#0000002e",
+              "position": 0.41
+            },
+            {
+              "color": "#00000040",
+              "position": 0.47
+            },
+            {
+              "color": "#00000052",
+              "position": 0.53
+            },
+            {
+              "color": "#00000066",
+              "position": 0.59
+            },
+            {
+              "color": "#0000007a",
+              "position": 0.65
+            },
+            {
+              "color": "#00000094",
+              "position": 0.71
+            },
+            {
+              "color": "#000000ab",
+              "position": 0.78
+            },
+            {
+              "color": "#000000c7",
+              "position": 0.84
+            },
+            {
+              "color": "#000000e3",
+              "position": 0.92
+            },
+            {
+              "color": "#000000ff",
+              "position": 1
+            }
+          ]
+        },
         "size": "20px"
       }
     }

package/vars/component/skeleton.d.ts

@@ -56,7 +56,9 @@ export declare const vars: {
         "color": "var(--seed-color-palette-gray-200)"
       },
       "shimmer": {
-        "gradient": "var(--seed-gradient-shimmer-neutral)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-shimmer-neutral)"
+        }
       }
     }
   },
@@ -69,7 +71,9 @@ export declare const vars: {
         "color": "var(--seed-color-bg-magic-weak)"
       },
       "shimmer": {
-        "gradient": "var(--seed-gradient-shimmer-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-shimmer-magic)"
+        }
       }
     }
   }

package/vars/component/skeleton.mjs

@@ -41,7 +41,9 @@ export const vars = {
         "color": "var(--seed-color-palette-gray-200)"
       },
       "shimmer": {
-        "gradient": "var(--seed-gradient-shimmer-neutral)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-shimmer-neutral)"
+        }
       }
     }
   },
@@ -51,7 +53,9 @@ export const vars = {
         "color": "var(--seed-color-bg-magic-weak)"
       },
       "shimmer": {
-        "gradient": "var(--seed-gradient-shimmer-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-shimmer-magic)"
+        }
       }
     }
   }

package/vars/component/top-navigation.d.ts

@@ -58,7 +58,19 @@ export declare const vars: {
   "toneTransparentGradientTrue": {
     "enabled": {
       "root": {
-        "gradient": "#00000059 0%, #00000000 100%",
+        "gradient": {
+          "serialized": "#00000059 0%, #00000000 100%",
+          "stops": [
+            {
+              "color": "#00000059",
+              "position": 0
+            },
+            {
+              "color": "#00000000",
+              "position": 1
+            }
+          ]
+        },
         /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
         "bleedBottom": "var(--seed-dimension-x5)"
       }

package/vars/component/top-navigation.mjs

@@ -51,7 +51,19 @@ export const vars = {
   "toneTransparentGradientTrue": {
     "enabled": {
       "root": {
-        "gradient": "#00000059 0%, #00000000 100%",
+        "gradient": {
+          "serialized": "#00000059 0%, #00000000 100%",
+          "stops": [
+            {
+              "color": "#00000059",
+              "position": 0
+            },
+            {
+              "color": "#00000000",
+              "position": 1
+            }
+          ]
+        },
         "bleedBottom": "var(--seed-dimension-x5)"
       }
     }

package/vars/gradient.d.ts

@@ -1,3 +1,5 @@
+/** 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다. */
+export declare const fadeMask = "var(--seed-gradient-fade-mask)";
 /** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다. */
 export declare const glowMagic = "var(--seed-gradient-glow-magic)";
 /** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다. */

package/vars/gradient.mjs

@@ -1,3 +1,4 @@
+export const fadeMask = "var(--seed-gradient-fade-mask)";
 export const glowMagic = "var(--seed-gradient-glow-magic)";
 export const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
 export const highlightMagic = "var(--seed-gradient-highlight-magic)";