@seed-design/lynx-css 0.1.0

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

@@ -0,0 +1,40 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "15px",
+        "color": "var(--seed-color-fg-placeholder)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledSelectedPressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/select-box-checkmark.mjs

@@ -0,0 +1,40 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "15px",
+        "color": "var(--seed-color-fg-placeholder)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledSelectedPressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapX": "var(--seed-dimension-x3)",
+        "gapY": "var(--seed-dimension-spacing-y-component-default)"
+      }
+    }
+  }
+}

package/vars/component/select-box-group.mjs

@@ -0,0 +1,10 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapX": "var(--seed-dimension-x3)",
+        "gapY": "var(--seed-dimension-spacing-y-component-default)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r3)",
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        /** enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "trigger": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "footer": {
+        /** 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다. */
+        "expandHeightDuration": "400ms",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        /** 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다. */
+        "expandOpacityDuration": "var(--seed-duration-d6)",
+        "expandOpacityTimingFunction": "var(--seed-timing-function-easing)",
+        /** 닫힐 때는 빠르게 접히고 천천히 fade out됩니다. */
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)",
+        /** 닫힐 때는 빠르게 접히고 천천히 fade out됩니다. */
+        "collapseOpacityDuration": "400ms",
+        "collapseOpacityTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "enabledSelected": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "layoutHorizontal": {
+    "enabled": {
+      "trigger": {
+        "paddingLeft": "var(--seed-dimension-x5)",
+        "paddingRight": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "layoutVertical": {
+    "enabled": {
+      "trigger": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x2_5)"
+      }
+    }
+  }
+}

package/vars/component/select-box.mjs

@@ -0,0 +1,102 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r3)",
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "trigger": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "footer": {
+        "expandHeightDuration": "400ms",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "expandOpacityDuration": "var(--seed-duration-d6)",
+        "expandOpacityTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseOpacityDuration": "400ms",
+        "collapseOpacityTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "enabledSelected": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "layoutHorizontal": {
+    "enabled": {
+      "trigger": {
+        "paddingLeft": "var(--seed-dimension-x5)",
+        "paddingRight": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "layoutVertical": {
+    "enabled": {
+      "trigger": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x2_5)"
+      }
+    }
+  }
+}

package/vars/component/skeleton.d.ts

@@ -0,0 +1,76 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "shimmer": {
+        "duration": "1.5s",
+        "timingFunction": "var(--seed-timing-function-easing)"
+      }
+    }
+  },
+  /**
+   * 기본값입니다.
+   */
+  "radius0": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "0px"
+      }
+    }
+  },
+  /**
+   * 텍스트 콘텐츠에 사용합니다.
+   */
+  "radius8": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "8px"
+      }
+    }
+  },
+  /**
+   * 카드 및 썸네일에 사용합니다.
+   */
+  "radius16": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "16px"
+      }
+    }
+  },
+  /**
+   * Avatar(원형) 콘텐츠에 사용합니다.
+   */
+  "radiusFull": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)"
+      }
+    }
+  },
+  /**
+   * 데이터를 불러오는 일반적인 로딩 경험에 사용합니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "shimmer": {
+        "gradient": "var(--seed-gradient-shimmer-neutral)"
+      }
+    }
+  },
+  /**
+   * AI 기능이 활성화되었을 때 사용합니다.
+   */
+  "toneMagic": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-magic-weak)"
+      },
+      "shimmer": {
+        "gradient": "var(--seed-gradient-shimmer-magic)"
+      }
+    }
+  }
+}

package/vars/component/skeleton.mjs

@@ -0,0 +1,58 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "shimmer": {
+        "duration": "1.5s",
+        "timingFunction": "var(--seed-timing-function-easing)"
+      }
+    }
+  },
+  "radius0": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "0px"
+      }
+    }
+  },
+  "radius8": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "8px"
+      }
+    }
+  },
+  "radius16": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "16px"
+      }
+    }
+  },
+  "radiusFull": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "shimmer": {
+        "gradient": "var(--seed-gradient-shimmer-neutral)"
+      }
+    }
+  },
+  "toneMagic": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-magic-weak)"
+      },
+      "shimmer": {
+        "gradient": "var(--seed-gradient-shimmer-magic)"
+      }
+    }
+  }
+}

package/vars/component/slider-thumb.d.ts

@@ -0,0 +1,25 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "scaleDuration": "var(--seed-duration-d3)",
+        "scaleTimingFunction": "var(--seed-timing-function-easing)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "scale": "1.2"
+      }
+    }
+  }
+}

package/vars/component/slider-thumb.mjs

@@ -0,0 +1,25 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "scaleDuration": "var(--seed-duration-d3)",
+        "scaleTimingFunction": "var(--seed-timing-function-easing)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "scale": "1.2"
+      }
+    }
+  }
+}

package/vars/component/slider-tick.d.ts

@@ -0,0 +1,23 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  "weightThin": {
+    "enabled": {
+      "root": {
+        "width": "1px"
+      }
+    }
+  },
+  "weightThick": {
+    "enabled": {
+      "root": {
+        "width": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/slider-tick.mjs

@@ -0,0 +1,23 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  "weightThin": {
+    "enabled": {
+      "root": {
+        "width": "1px"
+      }
+    }
+  },
+  "weightThick": {
+    "enabled": {
+      "root": {
+        "width": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/slider.d.ts

@@ -0,0 +1,78 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "control": {
+        "height": "26px"
+      },
+      "track": {
+        "height": "var(--seed-dimension-x1)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-palette-gray-400)"
+      },
+      "range": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-fg-neutral)",
+        "widthDuration": "var(--seed-duration-d3)",
+        "widthTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "thumb": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      /** arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다. */
+      "valueIndicatorRoot": {
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "cornerRadius": "var(--seed-radius-r1_5)",
+        /** value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다. */
+        "paddingX": "var(--seed-dimension-x2)",
+        "paddingY": "var(--seed-dimension-x1)",
+        "offsetY": "var(--seed-dimension-x3)",
+        "enterScale": "0.9",
+        "enterOpacity": "0",
+        "enterDuration": "var(--seed-duration-d4)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "exitScale": "1",
+        "exitOpacity": "0",
+        "exitDuration": "var(--seed-duration-d4)",
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "valueIndicatorArrow": {
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "width": "var(--seed-dimension-x2)",
+        "height": "var(--seed-dimension-x1_5)",
+        "cornerRadius": "var(--seed-radius-r0_5)",
+        /** arrow와 thumb 사이의 거리를 정의합니다. */
+        "gutter": "var(--seed-dimension-x0_5)"
+      },
+      "valueIndicatorLabel": {
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "marker": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      }
+    },
+    "disabled": {
+      "range": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "thumb": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "marker": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}