@seed-design/css 2.5.0 → 2.6.0

package/recipes/wheel-picker-public.layered.css

@@ -0,0 +1,140 @@
+@layer seed-components {
+  .seed-wheel-picker-public__root {
+    background-color: var(--seed-color-bg-layer-floating);
+    --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
+    --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-wheel-picker-public__scrollFog {
+    z-index: 1;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-wheel-picker-public__columns {
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+  .seed-wheel-picker-public__column {
+    box-sizing: border-box;
+    overscroll-behavior-x: none;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    touch-action: pan-y;
+    cursor: grab;
+    width: max-content;
+    height: 100%;
+    padding-block: var(--seed-wheel-picker-public-center-offset);
+    outline: none;
+    flex: none;
+    overflow: hidden auto;
+  }
+
+  .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
+    cursor: default;
+    --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
+    overflow-y: hidden;
+  }
+
+  .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
+    cursor: grabbing;
+    scroll-snap-type: none;
+  }
+
+  .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
+    scroll-snap-type: none;
+  }
+
+  .seed-wheel-picker-public__column::-webkit-scrollbar {
+    display: none;
+  }
+
+  .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    border-radius: var(--seed-radius-r2);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  }
+
+  .seed-wheel-picker-public__column.seed-wheel-picker-public__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
+  .seed-wheel-picker-public__item {
+    height: var(--seed-wheel-picker-public-item-size);
+    min-height: var(--seed-wheel-picker-public-item-size);
+    color: var(--seed-wheel-picker-public-item-color);
+    scroll-snap-align: center;
+    -webkit-user-select: none;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
+    color: #0000;
+    background-image: linear-gradient(to bottom, var(--seed-wheel-picker-public-item-color) 0%, var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) 100%);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  .seed-wheel-picker-public__itemLabel {
+    box-sizing: border-box;
+    height: 100%;
+    padding-inline: var(--seed-dimension-x4);
+    font-weight: var(--seed-font-weight-medium);
+    white-space: nowrap;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .seed-wheel-picker-public__selectionIndicator {
+    z-index: 0;
+    inset-inline: var(--seed-dimension-x4);
+    height: var(--seed-wheel-picker-public-item-size);
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .seed-wheel-picker-public__root--size_small {
+    height: var(--seed-wheel-picker-public-viewport-size, 180px);
+    --seed-wheel-picker-public-item-size: 36px;
+    --seed-wheel-picker-public-scroll-fog-max-height: 108px;
+  }
+
+  .seed-wheel-picker-public__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+  }
+
+  .seed-wheel-picker-public__root--size_medium {
+    height: var(--seed-wheel-picker-public-viewport-size, 220px);
+    --seed-wheel-picker-public-item-size: 44px;
+    --seed-wheel-picker-public-scroll-fog-max-height: 132px;
+  }
+
+  .seed-wheel-picker-public__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+  }
+}

package/recipes/wheel-picker-public.layered.mjs

@@ -0,0 +1,63 @@
+import './wheel-picker-public.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const wheelPickerPublicSlotNames = [
+  [
+    "root",
+    "seed-wheel-picker-public__root"
+  ],
+  [
+    "scrollFog",
+    "seed-wheel-picker-public__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-wheel-picker-public__columns"
+  ],
+  [
+    "column",
+    "seed-wheel-picker-public__column"
+  ],
+  [
+    "item",
+    "seed-wheel-picker-public__item"
+  ],
+  [
+    "itemLabel",
+    "seed-wheel-picker-public__itemLabel"
+  ],
+  [
+    "selectionIndicator",
+    "seed-wheel-picker-public__selectionIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const wheelPickerPublicVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ]
+};
+
+export const wheelPickerPublicVariantKeys = Object.keys(wheelPickerPublicVariantMap);
+
+export function wheelPickerPublic(props) {
+  return Object.fromEntries(
+    wheelPickerPublicSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(wheelPickerPublic, { splitVariantProps: (props) => splitVariantProps(props, wheelPickerPublicVariantMap) });
+
+// @recipe(seed): wheel-picker-public

package/recipes/wheel-picker-public.mjs

@@ -0,0 +1,63 @@
+import './wheel-picker-public.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const wheelPickerPublicSlotNames = [
+  [
+    "root",
+    "seed-wheel-picker-public__root"
+  ],
+  [
+    "scrollFog",
+    "seed-wheel-picker-public__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-wheel-picker-public__columns"
+  ],
+  [
+    "column",
+    "seed-wheel-picker-public__column"
+  ],
+  [
+    "item",
+    "seed-wheel-picker-public__item"
+  ],
+  [
+    "itemLabel",
+    "seed-wheel-picker-public__itemLabel"
+  ],
+  [
+    "selectionIndicator",
+    "seed-wheel-picker-public__selectionIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const wheelPickerPublicVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ]
+};
+
+export const wheelPickerPublicVariantKeys = Object.keys(wheelPickerPublicVariantMap);
+
+export function wheelPickerPublic(props) {
+  return Object.fromEntries(
+    wheelPickerPublicSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(wheelPickerPublic, { splitVariantProps: (props) => splitVariantProps(props, wheelPickerPublicVariantMap) });
+
+// @recipe(seed): wheel-picker-public

package/recipes/wheel-picker.css

@@ -77,7 +77,7 @@
 .seed-wheel-picker__selectionIndicator {
     position: absolute;
     z-index: 0;
-    inset-inline: 0;
+    inset-inline: var(--seed-dimension-x4);
     top: 50%;
     height: var(--seed-wheel-picker-item-size);
     transform: translateY(-50%);

package/recipes/wheel-picker.layered.css

@@ -90,7 +90,7 @@
 
   .seed-wheel-picker__selectionIndicator {
     z-index: 0;
-    inset-inline: 0;
+    inset-inline: var(--seed-dimension-x4);
     height: var(--seed-wheel-picker-item-size);
     pointer-events: none;
     position: absolute;

package/scale-feedback/index.d.ts

@@ -0,0 +1,3 @@
+export declare const SCALE_FEEDBACK_CLASS_NAME: "seed-scale-feedback";
+export declare const feedbackScale: "var(--seed-feedback-scale)";
+export declare const feedbackScaleTransition: "var(--seed-feedback-scale-transition)";

package/scale-feedback/index.mjs

@@ -0,0 +1,33 @@
+// Scale feedback's public surface for styles this package does not author: the
+// class that opts an element in, and the two values its rules consume.
+//
+// Unlike `@seed-design/css/vars/component/*`, these names are stable API — a
+// consumer's own CSS is expected to reference them.
+/**
+ * Duplicated in packages/qvism-preset/src/utils/scale-feedback.ts, which emits
+ * the matching rule and cannot import from here (css is generated from it).
+ * Edit both together — nothing checks, and drift silently leaves the derivation
+ * unapplied.
+ */
+export const SCALE_FEEDBACK_CLASS_NAME = "seed-scale-feedback";
+
+/**
+ * The ratio an element shrinks to while pressed.
+ *
+ * base.css declares it on `:root` and again on every element carrying
+ * `SCALE_FEEDBACK_CLASS_NAME`, so it is defined everywhere in the document and
+ * resolves to 1 wherever no measurement exists yet — before the first
+ * ResizeObserver callback, under SSR, or with no JS at all. Reading it needs no
+ * fallback of its own.
+ */
+export const feedbackScale = "var(--seed-feedback-scale)";
+
+/**
+ * The `transition` list entry that animates the scale, carrying the
+ * `$duration.pressed-scale` and `$timing-function.pressed-scale` tokens.
+ *
+ * `transition` is a shorthand, so a rule that animates anything else replaces
+ * it whole — splice this into your own list rather than choosing between it and
+ * your own transitions.
+ */
+export const feedbackScaleTransition = "var(--seed-feedback-scale-transition)";

package/vars/color/stroke.d.ts

@@ -13,13 +13,13 @@ export declare const informativeSolid = "var(--seed-color-stroke-informative-sol
 export declare const informativeWeak = "var(--seed-color-stroke-informative-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast) */
 export declare const neutralContrast = "var(--seed-color-stroke-neutral-contrast)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) */
+/** 의미 단위가 바뀌는 경계를 나누는 선입니다. 섹션과 섹션 사이, 콘텐츠와 액션 영역 사이, 헤더와 본문 경계처럼 한 화면에 한두 번만 등장하는 구분에 사용됩니다. (muted) */
 export declare const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) */
 export declare const neutralSolid = "var(--seed-color-stroke-neutral-solid)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) */
+/** 반복되는 동일한 성격의 항목 사이를 나누는 선입니다. 리스트 아이템, 테이블 row, 설정 메뉴 항목처럼 한 화면에 여러 번 등장하는 구분에 사용됩니다. (subtle) */
 export declare const neutralSubtle = "var(--seed-color-stroke-neutral-subtle)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) */
+/** 요소의 외곽을 그려 형태를 만드는 선입니다. 카드, 인풋 필드, 아웃라인 버튼처럼 선 자체가 요소의 경계를 정의할 때 사용됩니다. (weak) */
 export declare const neutralWeak = "var(--seed-color-stroke-neutral-weak)";
 /** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid) */
 export declare const positiveSolid = "var(--seed-color-stroke-positive-solid)";

package/vars/component/accordion-item.d.ts

@@ -123,7 +123,7 @@ export declare const vars: {
   "variantSeparated": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "cornerRadius": "var(--seed-radius-r3)"
       }

package/vars/component/accordion-item.mjs

@@ -117,7 +117,7 @@ export const vars = {
   "variantSeparated": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "cornerRadius": "var(--seed-radius-r3)"
       }

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

@@ -3,9 +3,7 @@ export declare const vars: {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -444,11 +442,6 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s95)"
-      }
     }
   },
   /**
@@ -506,11 +499,6 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   /**
@@ -568,11 +556,6 @@ export declare const vars: {
         "size": "16px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   /**
@@ -630,11 +613,6 @@ export declare const vars: {
         "size": "18px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s98)"
-      }
     }
   },
   /**

package/vars/component/action-button.mjs

@@ -3,9 +3,7 @@ export const vars = {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -378,11 +376,6 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s95)"
-      }
     }
   },
   "sizeXsmallLayoutWithText": {
@@ -426,11 +419,6 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   "sizeSmallLayoutWithText": {
@@ -474,11 +462,6 @@ export const vars = {
         "size": "16px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   "sizeMediumLayoutWithText": {
@@ -522,11 +505,6 @@ export const vars = {
         "size": "18px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s98)"
-      }
     }
   },
   "sizeLargeLayoutWithText": {

package/vars/component/bottom-sheet.d.ts

@@ -12,7 +12,7 @@ export declare const vars: {
       },
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "640px",
+        "maxWidth": "480px",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/bottom-sheet.mjs

@@ -12,7 +12,7 @@ export const vars = {
       },
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "640px",
+        "maxWidth": "480px",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

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

@@ -0,0 +1,81 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  /**
+   * 일반적인 정보를 전달합니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 유용한 정보를 제공합니다.
+   */
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * 긍정적인 상태를 나타냅니다.
+   */
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * 주의가 필요한 상태를 나타냅니다.
+   */
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * 중요한 문제를 나타냅니다.
+   */
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * AI 기능을 나타냅니다.
+   */
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/callout.d.ts

@@ -29,8 +29,7 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },

package/vars/component/callout.mjs

@@ -27,8 +27,7 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },