@seed-design/lynx-css 0.12.1 → 0.14.0

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

@@ -23,15 +23,15 @@ export const vars = {
     },
     "selected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "selectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     },
     "disabled": {

package/vars/component/popover-close-button.d.ts

@@ -0,0 +1,22 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  }
+}

package/vars/component/popover-close-button.mjs

@@ -0,0 +1,22 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  }
+}

package/vars/component/popover.d.ts

@@ -0,0 +1,74 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "cornerRadius": "var(--seed-radius-r5)",
+        "shadow": "var(--seed-shadow-s3)",
+        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        "minWidth": "320px",
+        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        "maxWidth": "480px",
+        /** viewport가 이보다 작으면 overflowPadding과 safe-area를 뺀 가용 높이로 축소됩니다. */
+        "maxHeight": "600px",
+        /** 트리거와 popover 사이의 간격을 정의합니다. */
+        "gutter": "var(--seed-dimension-x2)",
+        /** popover와 뷰포트 경계 사이의 최소 간격을 정의합니다. 위아래에 safe-area가 있으면 그 안쪽으로 배치됩니다. */
+        "overflowPadding": "var(--seed-dimension-x4)",
+        "enterDuration": "var(--seed-duration-d3)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterScale": "0.95",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitScale": "0.95",
+        "exitOpacity": "0"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x4)",
+        /** closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다. */
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
+      },
+      "body": {
+        "paddingX": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x12)",
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x4)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x6)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "closeButton": {
+        "fromTop": "27px",
+        "fromRight": "24px"
+      }
+    },
+    "scrolled": {
+      "body": {
+        "strokeWidth": "1px",
+        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  }
+}

package/vars/component/popover.mjs

@@ -0,0 +1,64 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "cornerRadius": "var(--seed-radius-r5)",
+        "shadow": "var(--seed-shadow-s3)",
+        "minWidth": "320px",
+        "maxWidth": "480px",
+        "maxHeight": "600px",
+        "gutter": "var(--seed-dimension-x2)",
+        "overflowPadding": "var(--seed-dimension-x4)",
+        "enterDuration": "var(--seed-duration-d3)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterScale": "0.95",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitScale": "0.95",
+        "exitOpacity": "0"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x4)",
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
+      },
+      "body": {
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x12)",
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x4)",
+        "paddingBottom": "var(--seed-dimension-x6)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "closeButton": {
+        "fromTop": "27px",
+        "fromRight": "24px"
+      }
+    },
+    "scrolled": {
+      "body": {
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  }
+}

package/vars/component/radiomark.d.ts

@@ -30,7 +30,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     },
     "enabledSelectedPressed": {
@@ -57,15 +57,15 @@ export declare const vars: {
   "toneNeutral": {
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "enabledSelectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     },
     "disabled": {

package/vars/component/radiomark.mjs

@@ -30,7 +30,7 @@ export const vars = {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     },
     "enabledSelectedPressed": {
@@ -57,15 +57,15 @@ export const vars = {
   "toneNeutral": {
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "enabledSelectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     },
     "disabled": {

package/vars/component/side-panel-close-button.d.ts

@@ -10,9 +10,7 @@ export declare const vars: {
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
-        "size": "22px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "size": "22px"
       }
     },
     "pressed": {

package/vars/component/side-panel-close-button.mjs

@@ -10,9 +10,7 @@ export const vars = {
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
-        "size": "22px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "size": "22px"
       }
     },
     "pressed": {

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

@@ -4,7 +4,7 @@ export declare const vars: {
       "root": {
         "size": "var(--seed-dimension-x5)",
         "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "scaleDuration": "var(--seed-duration-d3)",
         "scaleTimingFunction": "var(--seed-timing-function-easing)",
         "translateDuration": "var(--seed-duration-d3)",

package/vars/component/slider-thumb.mjs

@@ -4,7 +4,7 @@ export const vars = {
       "root": {
         "size": "var(--seed-dimension-x5)",
         "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "scaleDuration": "var(--seed-duration-d3)",
         "scaleTimingFunction": "var(--seed-timing-function-easing)",
         "translateDuration": "var(--seed-duration-d3)",

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

@@ -2,7 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     }
   },

package/vars/component/slider-tick.mjs

@@ -2,7 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     }
   },

package/vars/component/slider.d.ts

@@ -21,11 +21,11 @@ export declare const vars: {
       "thumb": {
         "size": "var(--seed-dimension-x5)",
         "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       /** arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다. */
       "valueIndicatorRoot": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r1_5)",
         /** value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다. */
         "paddingX": "var(--seed-dimension-x2)",
@@ -43,7 +43,7 @@ export declare const vars: {
         "translateTimingFunction": "var(--seed-timing-function-easing)"
       },
       "valueIndicatorArrow": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "width": "var(--seed-dimension-x2)",
         "height": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-r0_5)",
@@ -51,7 +51,7 @@ export declare const vars: {
         "gutter": "var(--seed-dimension-x0_5)"
       },
       "valueIndicatorLabel": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "lineHeight": "var(--seed-line-height-t3)",
         "fontWeight": "var(--seed-font-weight-medium)"

package/vars/component/slider.mjs

@@ -21,10 +21,10 @@ export const vars = {
       "thumb": {
         "size": "var(--seed-dimension-x5)",
         "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "valueIndicatorRoot": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r1_5)",
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x1)",
@@ -41,14 +41,14 @@ export const vars = {
         "translateTimingFunction": "var(--seed-timing-function-easing)"
       },
       "valueIndicatorArrow": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "width": "var(--seed-dimension-x2)",
         "height": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-r0_5)",
         "gutter": "var(--seed-dimension-x0_5)"
       },
       "valueIndicatorLabel": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "lineHeight": "var(--seed-line-height-t3)",
         "fontWeight": "var(--seed-font-weight-medium)"

package/vars/component/snackbar.d.ts

@@ -8,7 +8,7 @@ export declare const vars: {
         "offsetTimingFunction": "var(--seed-timing-function-easing)"
       },
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
         "maxWidth": "464px",
@@ -28,7 +28,7 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2_5)"
       },
       "message": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)",
         "fontWeight": "var(--seed-font-weight-regular)"

package/vars/component/snackbar.mjs

@@ -8,7 +8,7 @@ export const vars = {
         "offsetTimingFunction": "var(--seed-timing-function-easing)"
       },
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
         "maxWidth": "464px",
@@ -28,7 +28,7 @@ export const vars = {
         "gap": "var(--seed-dimension-x2_5)"
       },
       "message": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)",
         "fontWeight": "var(--seed-font-weight-regular)"

package/vars/component/switchmark.d.ts

@@ -44,18 +44,21 @@ export declare const vars: {
     "enabledSelected": {
       "root": {
         "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "thumb": {
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     }
   },
   "toneNeutral": {
     "enabled": {
       "thumb": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       }
     },
     "disabled": {

package/vars/component/switchmark.mjs

@@ -42,18 +42,21 @@ export const vars = {
     "enabledSelected": {
       "root": {
         "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "thumb": {
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     }
   },
   "toneNeutral": {
     "enabled": {
       "thumb": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       }
     },
     "disabled": {

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

@@ -19,17 +19,17 @@ export declare const vars: {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "progressCircle": {
         "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
-        "rangeColor": "var(--seed-color-palette-static-white)"
+        "rangeColor": "var(--seed-color-fg-on-brand-solid)"
       }
     },
     "pressed": {

package/vars/component/toggle-button.mjs

@@ -16,17 +16,17 @@ export const vars = {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       },
       "progressCircle": {
         "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
-        "rangeColor": "var(--seed-color-palette-static-white)"
+        "rangeColor": "var(--seed-color-fg-on-brand-solid)"
       }
     },
     "pressed": {

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

@@ -2,6 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
+        "height": "56px",
         "paddingX": "var(--seed-dimension-x1_5)"
       }
     }
@@ -9,7 +10,6 @@ export declare const vars: {
   "themeIos": {
     "enabled": {
       "root": {
-        "height": "44px",
         /** main과 left/right 영역 간 최소 간격입니다. */
         "titleMinGap": "var(--seed-dimension-x2)"
       }
@@ -17,9 +17,6 @@ export declare const vars: {
   },
   "themeAndroid": {
     "enabled": {
-      "root": {
-        "height": "56px"
-      },
       /** title과 subtitle을 포함하는 영역입니다. */
       "main": {
         "paddingLeft": "var(--seed-dimension-x1_5)"

package/vars/component/top-navigation.mjs

@@ -2,6 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
+        "height": "56px",
         "paddingX": "var(--seed-dimension-x1_5)"
       }
     }
@@ -9,16 +10,12 @@ export const vars = {
   "themeIos": {
     "enabled": {
       "root": {
-        "height": "44px",
         "titleMinGap": "var(--seed-dimension-x2)"
       }
     }
   },
   "themeAndroid": {
     "enabled": {
-      "root": {
-        "height": "56px"
-      },
       "main": {
         "paddingLeft": "var(--seed-dimension-x1_5)"
       }