@seed-design/lynx-css 0.0.0-alpha-20260622094810

package/vars/component/chip.mjs

@@ -0,0 +1,303 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "prefixIcon": {
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "variantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "variantOutlineStrong": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "variantOutlineWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
+        "color": "var(--seed-color-bg-neutral-weak)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "32px",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "36px",
+        "paddingX": "var(--seed-dimension-x2)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "40px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x7)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "44px"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x12)"
+      }
+    }
+  },
+  "sizeLargeLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x13)"
+      }
+    }
+  },
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x8)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x9)"
+      }
+    }
+  },
+  "sizeLargeLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x10)"
+      }
+    }
+  }
+}

package/vars/component/content-placeholder.d.ts

@@ -0,0 +1,28 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "asset": {
+        "minWidth": "var(--seed-dimension-x4)",
+        "maxWidth": "160px",
+        /** root slot 대한 asset slot의 높이 비율입니다. */
+        "heightFraction": "0.5",
+        "color": "var(--seed-color-palette-gray-400)"
+      }
+    }
+  },
+  "typeDefault": {},
+  "typeBuySell": {},
+  "typeCar": {},
+  "typeCommerce": {},
+  "typeCoupon": {},
+  "typeFood": {},
+  "typeGroup": {},
+  "typeImage": {},
+  "typeJobs": {},
+  "typeBusiness": {},
+  "typePost": {},
+  "typeRealty": {}
+}

package/vars/component/content-placeholder.mjs

@@ -0,0 +1,27 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "asset": {
+        "minWidth": "var(--seed-dimension-x4)",
+        "maxWidth": "160px",
+        "heightFraction": "0.5",
+        "color": "var(--seed-color-palette-gray-400)"
+      }
+    }
+  },
+  "typeDefault": {},
+  "typeBuySell": {},
+  "typeCar": {},
+  "typeCommerce": {},
+  "typeCoupon": {},
+  "typeFood": {},
+  "typeGroup": {},
+  "typeImage": {},
+  "typeJobs": {},
+  "typeBusiness": {},
+  "typePost": {},
+  "typeRealty": {}
+}

package/vars/component/contextual-floating-button.d.ts

@@ -0,0 +1,144 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "var(--seed-shadow-s3)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "progressCircle": {
+        "size": "16px",
+        "thickness": "2px"
+      }
+    }
+  },
+  /**
+   * 배경과 대비되는 강조된 보조 액션으로 중요도 높은 행동 유도 시 적합합니다.
+   */
+  "variantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-700)",
+        "rangeColor": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  /**
+   * 시각적 부담 없이 부드럽게 액션을 유도합니다.
+   */
+  "variantLayer": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  /**
+   * label과 prefixIcon을 함께 표시합니다.
+   */
+  "layoutWithText": {
+    "enabled": {
+      "root": {
+        "minHeight": "36px",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      }
+    }
+  },
+  /**
+   * icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
+   */
+  "layoutIconOnly": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "22px"
+      }
+    }
+  }
+}

package/vars/component/contextual-floating-button.mjs

@@ -0,0 +1,132 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "var(--seed-shadow-s3)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "progressCircle": {
+        "size": "16px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "variantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-700)",
+        "rangeColor": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  "variantLayer": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  "layoutWithText": {
+    "enabled": {
+      "root": {
+        "minHeight": "36px",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      }
+    }
+  },
+  "layoutIconOnly": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "22px"
+      }
+    }
+  }
+}