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

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

@@ -0,0 +1,213 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  /**
+   * 브랜드 컬러로 강조된 스타일입니다.
+   */
+  "variantBrandSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
+        "rangeColor": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * 기본적인 토글 스타일입니다.
+   */
+  "variantNeutralWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "sizeXsmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  }
+}

package/vars/component/toggle-button.mjs

@@ -0,0 +1,207 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "variantBrandSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
+        "rangeColor": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "variantNeutralWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "sizeXsmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "24px"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/top-navigation-icon-button.mjs

@@ -0,0 +1,36 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "24px"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "44px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        /** 버튼 레이블이 길어졌을 때 ellipsis 말줄임을 시작할 최대 너비입니다. Top Navigation main slot이 충분한 공간을 차지할 수 있도록 하기 위해 폰트 스케일링의 영향을 받지 않는 px 값을 사용합니다. */
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
+}

package/vars/component/top-navigation-text-button.mjs

@@ -0,0 +1,51 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "44px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
+}

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

@@ -0,0 +1,102 @@
+export declare const vars: {
+  "themeIos": {
+    "enabled": {
+      "root": {
+        "height": "44px",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "themeAndroid": {
+    "enabled": {
+      "root": {
+        "height": "56px",
+        "paddingX": "var(--seed-dimension-x4)"
+      },
+      /** title과 subtitle을 포함하는 영역입니다. */
+      "main": {
+        "paddingLeft": "16px"
+      }
+    }
+  },
+  /**
+   * color를 $color.bg.layer-basement 등으로 변경하여 사용할 수 있습니다.
+   */
+  "toneLayer": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "subtitle": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "subtitle": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `gradient=false`: false로 사용하는 것을 권장하지 않습니다. gradient 없이 사용하면 Top Navigation의 콘텐츠 가독성을 직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를 사용하세요.
+   */
+  "toneTransparentGradientFalse": {
+    "enabled": {
+      "root": {
+        "color": "#00000000"
+      }
+    }
+  },
+  "toneTransparentGradientTrue": {
+    "enabled": {
+      "root": {
+        "gradient": "#00000059 0%, #00000000 100%",
+        /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
+        "bleedBottom": "var(--seed-dimension-x5)"
+      }
+    }
+  },
+  "titleLayoutTitleOnly": {
+    "enabled": {
+      "title": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  },
+  "titleLayoutWithSubtitle": {
+    "enabled": {
+      "title": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      },
+      "subtitle": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  }
+}