@seed-design/lynx-css 0.8.0 → 0.9.0

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

@@ -0,0 +1,133 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `tone=magic`: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/page-banner-close-button.mjs

@@ -0,0 +1,99 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    }
+  },
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -32,7 +32,6 @@ export declare const vars: {
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
         "marginLeft": "var(--seed-dimension-x2)"
       }
     }

package/vars/component/page-banner.mjs

@@ -31,7 +31,6 @@ export const vars = {
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
         "marginLeft": "var(--seed-dimension-x2)"
       }
     }

package/vars/component/pagination-button.d.ts

@@ -0,0 +1,33 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/pagination-button.mjs

@@ -0,0 +1,33 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/pagination-page-item.d.ts

@@ -0,0 +1,54 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/pagination-page-item.mjs

@@ -0,0 +1,54 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/radio.d.ts

@@ -4,6 +4,7 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
@@ -30,6 +31,7 @@ export declare const vars: {
   },
   "sizeMedium": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x8)"
       },
@@ -41,6 +43,7 @@ export declare const vars: {
   },
   "sizeLarge": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x9)"
       },

package/vars/component/select-box.d.ts

@@ -4,7 +4,7 @@ export declare const vars: {
       "root": {
         "cornerRadius": "var(--seed-radius-r3)",
         "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
@@ -63,7 +63,7 @@ export declare const vars: {
     },
     "disabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"

package/vars/component/select-box.mjs

@@ -4,7 +4,7 @@ export const vars = {
       "root": {
         "cornerRadius": "var(--seed-radius-r3)",
         "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
@@ -58,7 +58,7 @@ export const vars = {
     },
     "disabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"

package/vars/component/snackbar.d.ts

@@ -11,7 +11,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-neutral-inverted)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
-        "maxWidth": "560px",
+        "maxWidth": "464px",
         "paddingX": "var(--seed-dimension-x2_5)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "enterOpacity": "0",

package/vars/component/snackbar.mjs

@@ -11,7 +11,7 @@ export const vars = {
         "color": "var(--seed-color-bg-neutral-inverted)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
-        "maxWidth": "560px",
+        "maxWidth": "464px",
         "paddingX": "var(--seed-dimension-x2_5)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "enterOpacity": "0",

package/vars/component/switch.d.ts

@@ -16,6 +16,7 @@ export declare const vars: {
   },
   "size32": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
       "root": {
         "height": "var(--seed-dimension-x8)",
         "gap": "var(--seed-dimension-x2_5)"
@@ -28,6 +29,7 @@ export declare const vars: {
   },
   "size24": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
       "root": {
         "height": "var(--seed-dimension-x6)",
         "gap": "var(--seed-dimension-x2)"
@@ -40,6 +42,7 @@ export declare const vars: {
   },
   "size16": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
       "root": {
         "height": "var(--seed-dimension-x6)",
         "gap": "var(--seed-dimension-x1_5)"

package/vars/component/switchmark.d.ts

@@ -10,6 +10,7 @@ export declare const vars: {
       },
       "thumb": {
         "cornerRadius": "var(--seed-radius-full)",
+        /** selected 여부에 따른 thumb 크기입니다. pressed 축소는 root에 적용되므로 이 값과 무관합니다. */
         "scale": "0.8",
         "scaleDuration": "var(--seed-duration-d3)",
         "scaleTimingFunction": "var(--seed-timing-function-easing)",
@@ -29,6 +30,7 @@ export declare const vars: {
     },
     "selected": {
       "thumb": {
+        /** selected 여부에 따른 thumb 크기입니다. pressed 축소는 root에 적용되므로 이 값과 무관합니다. */
         "scale": "1"
       }
     }

package/vars/component/wheel-picker.d.ts

@@ -0,0 +1,72 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)"
+      },
+      "selectionIndicator": {
+        "insetX": "var(--seed-dimension-x4)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "scrollFog": {
+        "maxHeightFraction": "0.4"
+      },
+      "itemLabel": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selected": {
+      "itemLabel": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "itemLabel": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "180px"
+      },
+      "selectionIndicator": {
+        "height": "36px"
+      },
+      "scrollFog": {
+        "maxHeight": "108px"
+      },
+      "item": {
+        "height": "36px"
+      },
+      "itemLabel": {
+        "fontSize": "var(--seed-font-size-t7-static)",
+        "lineHeight": "var(--seed-line-height-t7-static)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "220px"
+      },
+      "selectionIndicator": {
+        "height": "44px"
+      },
+      "scrollFog": {
+        "maxHeight": "132px"
+      },
+      "item": {
+        "height": "44px"
+      },
+      "itemLabel": {
+        "fontSize": "var(--seed-font-size-t10-static)",
+        "lineHeight": "var(--seed-line-height-t10-static)"
+      }
+    }
+  }
+}