@seed-design/css 2.8.3 → 3.0.0

package/vars/component/toggle-button.mjs

@@ -1,207 +0,0 @@
-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

@@ -1,45 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "size": "44px",
-        "cornerRadius": "var(--seed-radius-r2)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "icon": {
-        "size": "24px"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    }
-  },
-  "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

@@ -1,45 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "size": "44px",
-        "cornerRadius": "var(--seed-radius-r2)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "icon": {
-        "size": "24px"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    }
-  },
-  "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

@@ -1,61 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "height": "44px",
-        "paddingX": "var(--seed-dimension-x2_5)",
-        "cornerRadius": "var(--seed-radius-r2)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "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"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    }
-  },
-  "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

@@ -1,60 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "height": "44px",
-        "paddingX": "var(--seed-dimension-x2_5)",
-        "cornerRadius": "var(--seed-radius-r2)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "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"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    }
-  },
-  "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

@@ -1,121 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "paddingX": "var(--seed-dimension-x1_5)"
-      }
-    }
-  },
-  "themeIos": {
-    "enabled": {
-      "root": {
-        "height": "44px",
-        /** main과 left/right 영역 간 최소 간격입니다. */
-        "titleMinGap": "var(--seed-dimension-x2)"
-      }
-    }
-  },
-  "themeAndroid": {
-    "enabled": {
-      "root": {
-        "height": "56px"
-      },
-      /** title과 subtitle을 포함하는 영역입니다. */
-      "main": {
-        "paddingLeft": "var(--seed-dimension-x1_5)"
-      }
-    }
-  },
-  /**
-   * 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": {
-          "serialized": "#00000059 0%, #00000000 100%",
-          "stops": [
-            {
-              "color": "#00000059",
-              "position": 0
-            },
-            {
-              "color": "#00000000",
-              "position": 1
-            }
-          ]
-        },
-        /** 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"
-      }
-    }
-  }
-}

package/vars/component/top-navigation.mjs

@@ -1,112 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "paddingX": "var(--seed-dimension-x1_5)"
-      }
-    }
-  },
-  "themeIos": {
-    "enabled": {
-      "root": {
-        "height": "44px",
-        "titleMinGap": "var(--seed-dimension-x2)"
-      }
-    }
-  },
-  "themeAndroid": {
-    "enabled": {
-      "root": {
-        "height": "56px"
-      },
-      "main": {
-        "paddingLeft": "var(--seed-dimension-x1_5)"
-      }
-    }
-  },
-  "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)"
-      }
-    }
-  },
-  "toneTransparentGradientFalse": {
-    "enabled": {
-      "root": {
-        "color": "#00000000"
-      }
-    }
-  },
-  "toneTransparentGradientTrue": {
-    "enabled": {
-      "root": {
-        "gradient": {
-          "serialized": "#00000059 0%, #00000000 100%",
-          "stops": [
-            {
-              "color": "#00000059",
-              "position": 0
-            },
-            {
-              "color": "#00000000",
-              "position": 1
-            }
-          ]
-        },
-        "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"
-      }
-    }
-  }
-}