@seed-design/css 1.2.16 → 2.1.0

package/recipes/chip-tabs.layered.css

@@ -49,8 +49,6 @@
     box-sizing: border-box;
     white-space: nowrap;
     border-radius: var(--seed-radius-full);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
     font-family: inherit;
     font-weight: var(--seed-font-weight-medium);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -73,9 +71,10 @@
 
   .seed-chip-tabs__trigger--size_medium {
     min-height: 36px;
+    min-width: var(--seed-dimension-x12);
     font-size: var(--seed-font-size-t4);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
+    padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
+    padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
   }
 
   .seed-chip-tabs__list--size_large {
@@ -84,9 +83,10 @@
 
   .seed-chip-tabs__trigger--size_large {
     min-height: 40px;
+    min-width: var(--seed-dimension-x13);
     font-size: var(--seed-font-size-t4);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
+    padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
   }
 
   .seed-chip-tabs__trigger--variant_neutralSolid {
@@ -125,12 +125,7 @@
 
   .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
-    background-color: var(--seed-color-bg-disabled);
-    color: var(--seed-color-fg-disabled);
+    opacity: .5;
   }
 
   .seed-chip-tabs__trigger--variant_neutralOutline {
@@ -171,56 +166,7 @@
 
   .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
-    background-color: var(--seed-color-bg-disabled);
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-chip-tabs__trigger--variant_brandSolid {
-    background-color: var(--seed-color-bg-neutral-weak);
-    color: var(--seed-color-fg-neutral-muted);
-  }
-
-  .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]) {
-    background-color: var(--seed-color-bg-brand-solid);
-    color: var(--seed-color-palette-static-white);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
-      background-color: var(--seed-color-bg-neutral-weak-pressed);
-    }
-  }
-
-  @media not all and (hover: hover) and (pointer: fine) {
-    .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
-      background-color: var(--seed-color-bg-neutral-weak-pressed);
-    }
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
-      background-color: var(--seed-color-bg-brand-solid-pressed);
-    }
-  }
-
-  @media not all and (hover: hover) and (pointer: fine) {
-    .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
-      background-color: var(--seed-color-bg-brand-solid-pressed);
-    }
-  }
-
-  .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
-    cursor: not-allowed;
-    background-color: var(--seed-color-bg-disabled);
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
-    background-color: var(--seed-color-bg-disabled);
+    opacity: .5;
   }
 
   .seed-chip-tabs__root--contentLayout_fill {

package/recipes/chip-tabs.layered.mjs

@@ -44,8 +44,7 @@ export const chipTabsVariantMap = {
   ],
   "variant": [
     "neutralSolid",
-    "neutralOutline",
-    "brandSolid"
+    "neutralOutline"
   ],
   "contentLayout": [
     "fill",

package/recipes/chip-tabs.mjs

@@ -44,8 +44,7 @@ export const chipTabsVariantMap = {
   ],
   "variant": [
     "neutralSolid",
-    "neutralOutline",
-    "brandSolid"
+    "neutralOutline"
   ],
   "contentLayout": [
     "fill",

package/recipes/chip.d.ts

@@ -1,5 +1,9 @@
 declare interface ChipVariant {
   /**
+  * - `solid`: 기본 스타일입니다.
+  * - `outlineStrong`: 명확한 구분이 필요한 경우 사용합니다.
+  * - `outlineWeak`: Selection 사용 시 주목도가 낮은 스타일로 권장됩니다.
+  *
   * @default "solid"
   */
   variant: "solid" | "outlineStrong" | "outlineWeak";

package/recipes/contextual-floating-button.d.ts

@@ -1,9 +1,15 @@
 declare interface ContextualFloatingButtonVariant {
   /**
+  * - `solid`: 배경과 대비되는 강조된 보조 액션으로 중요도 높은 행동 유도 시 적합합니다.
+  * - `layer`: 시각적 부담 없이 부드럽게 액션을 유도합니다.
+  *
   * @default "solid"
   */
   variant: "solid" | "layer";
 /**
+  * - `withText`: label과 prefixIcon을 함께 표시합니다.
+  * - `iconOnly`: icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
+  *
   * @default "withText"
   */
   layout: "withText" | "iconOnly";

package/recipes/dialog.css

@@ -9,7 +9,7 @@
     left: 0;
     overscroll-behavior-y: none;
     --dialog-z-index: 2;
-    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0))
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
 }
 .seed-dialog__backdrop {
     position: fixed;
@@ -18,7 +18,7 @@
     bottom: 0;
     left: 0;
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0))
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
 }
 .seed-dialog__content {
     position: relative;
@@ -32,7 +32,10 @@
     background: var(--seed-color-bg-layer-floating);
     max-width: 272px;
     margin: auto var(--seed-dimension-x8);
-    border-radius: var(--seed-radius-r5)
+    border-radius: var(--seed-radius-r5);
+}
+.seed-dialog__content:is(:focus, [data-focus]) {
+    outline: none;
 }
 .seed-dialog__header {
     display: flex;
@@ -40,14 +43,14 @@
     padding-left: var(--seed-dimension-x5);
     padding-right: var(--seed-dimension-x5);
     padding-top: var(--seed-dimension-x5);
-    gap: var(--seed-dimension-x1_5)
+    gap: var(--seed-dimension-x1_5);
 }
 .seed-dialog__title {
     color: var(--seed-color-fg-neutral);
     font-size: var(--seed-font-size-t7);
     line-height: var(--seed-line-height-t7);
     font-weight: var(--seed-font-weight-bold);
-    margin: 0
+    margin: 0;
 }
 .seed-dialog__description {
     color: var(--seed-color-fg-neutral);
@@ -55,7 +58,7 @@
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
     margin: 0;
-    white-space: pre-wrap
+    white-space: pre-wrap;
 }
 .seed-dialog__footer {
     display: flex;
@@ -64,7 +67,7 @@
     padding-left: var(--seed-dimension-x5);
     padding-right: var(--seed-dimension-x5);
     padding-top: var(--seed-dimension-x4);
-    padding-bottom: var(--seed-dimension-x5)
+    padding-bottom: var(--seed-dimension-x5);
 }
 .seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
     animation: seed-enter;
@@ -73,7 +76,7 @@
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 0;
     --seed-enter-opacity: 0;
-    --seed-enter-scale: 1
+    --seed-enter-scale: 1;
 }
 .seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
     animation: seed-exit;
@@ -83,7 +86,7 @@
     --seed-exit-translate-x: 0;
     --seed-exit-translate-y: 0;
     --seed-exit-opacity: 0;
-    --seed-exit-scale: 1
+    --seed-exit-scale: 1;
 }
 .seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
     animation: seed-enter;
@@ -92,7 +95,7 @@
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 0;
     --seed-enter-opacity: 0;
-    --seed-enter-scale: 1.3
+    --seed-enter-scale: 1.3;
 }
 .seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
     animation: seed-exit;
@@ -102,5 +105,5 @@
     --seed-exit-translate-x: 0;
     --seed-exit-translate-y: 0;
     --seed-exit-opacity: 0;
-    --seed-exit-scale: 1
+    --seed-exit-scale: 1;
 }

package/recipes/dialog.layered.css

@@ -32,6 +32,10 @@
     position: relative;
   }
 
+  .seed-dialog__content:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
   .seed-dialog__header {
     padding-left: var(--seed-dimension-x5);
     padding-right: var(--seed-dimension-x5);

package/recipes/footer.css

@@ -0,0 +1,44 @@
+.seed-footer__linkText {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+    gap: var(--seed-dimension-x1);
+    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+}
+.seed-footer__linkText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-size: 14px;
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_large:is(:hover, [data-hover]) {
+        color: var(--seed-color-fg-neutral-subtle);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_large:is(:active, [data-active]) {
+        color: var(--seed-color-fg-neutral-subtle);
+    }
+}
+.seed-footer__linkText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral-muted);
+    --seed-suffix-icon-size: 12px;
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-muted);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_medium:is(:hover, [data-hover]) {
+        color: var(--seed-color-fg-neutral);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_medium:is(:active, [data-active]) {
+        color: var(--seed-color-fg-neutral);
+    }
+}

package/recipes/footer.d.ts

@@ -0,0 +1,24 @@
+declare interface FooterVariant {
+  /**
+  * @default "medium"
+  */
+  size: "large" | "medium";
+}
+
+declare type FooterVariantMap = {
+  [key in keyof FooterVariant]: Array<FooterVariant[key]>;
+};
+
+export declare type FooterVariantProps = Partial<FooterVariant>;
+
+export declare type FooterSlotName = "linkText";
+
+export declare const footerVariantMap: FooterVariantMap;
+
+export declare const footer: ((
+  props?: FooterVariantProps,
+) => Record<FooterSlotName, string>) & {
+  splitVariantProps: <T extends FooterVariantProps>(
+    props: T,
+  ) => [FooterVariantProps, Omit<T, keyof FooterVariantProps>];
+}

package/recipes/footer.layered.css

@@ -0,0 +1,52 @@
+@layer seed-components {
+  .seed-footer__linkText {
+    cursor: pointer;
+    align-items: center;
+    gap: var(--seed-dimension-x1);
+    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .seed-footer__linkText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-size: 14px;
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_large:is(:hover, [data-hover]) {
+      color: var(--seed-color-fg-neutral-subtle);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_large:is(:active, [data-active]) {
+      color: var(--seed-color-fg-neutral-subtle);
+    }
+  }
+
+  .seed-footer__linkText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral-muted);
+    --seed-suffix-icon-size: 12px;
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-muted);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_medium:is(:hover, [data-hover]) {
+      color: var(--seed-color-fg-neutral);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-footer__linkText--size_medium:is(:active, [data-active]) {
+      color: var(--seed-color-fg-neutral);
+    }
+  }
+}

package/recipes/footer.layered.mjs

@@ -0,0 +1,39 @@
+import './footer.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const footerSlotNames = [
+  [
+    "linkText",
+    "seed-footer__linkText"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const footerVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const footerVariantKeys = Object.keys(footerVariantMap);
+
+export function footer(props) {
+  return Object.fromEntries(
+    footerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(footer, { splitVariantProps: (props) => splitVariantProps(props, footerVariantMap) });
+
+// @recipe(seed): footer

package/recipes/footer.mjs

@@ -0,0 +1,39 @@
+import './footer.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const footerSlotNames = [
+  [
+    "linkText",
+    "seed-footer__linkText"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const footerVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const footerVariantKeys = Object.keys(footerVariantMap);
+
+export function footer(props) {
+  return Object.fromEntries(
+    footerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(footer, { splitVariantProps: (props) => splitVariantProps(props, footerVariantMap) });
+
+// @recipe(seed): footer

package/recipes/help-bubble.css

@@ -12,7 +12,12 @@
     padding-top: var(--seed-dimension-x2_5);
     padding-bottom: var(--seed-dimension-x2_5);
     border-radius: var(--seed-radius-r3);
-    --seed-box-max-width: initial;
+    --seed-box-max-width-base: initial;
+    --seed-box-max-width-sm: var(--seed-box-max-width-base);
+    --seed-box-max-width-md: var(--seed-box-max-width-sm);
+    --seed-box-max-width-lg: var(--seed-box-max-width-md);
+    --seed-box-max-width-xl: var(--seed-box-max-width-lg);
+    --seed-box-max-width: var(--seed-box-max-width-base);
     max-width: var(--seed-box-max-width);
 }
 .seed-help-bubble__content:is([data-state="open"], [data-open]) {
@@ -34,6 +39,9 @@
     --seed-exit-opacity: 0;
     --seed-exit-scale: 1;
 }
+.seed-help-bubble__content[data-instant] {
+    animation-duration: 0s;
+}
 .seed-help-bubble__content:is([hidden], [data-hidden]) {
     display: none !important;
 }
@@ -92,4 +100,24 @@
 .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+@media (min-width: 480px) {
+    .seed-help-bubble__content {
+        --seed-box-max-width: var(--seed-box-max-width-sm);
+    }
+}
+@media (min-width: 768px) {
+    .seed-help-bubble__content {
+        --seed-box-max-width: var(--seed-box-max-width-md);
+    }
+}
+@media (min-width: 1280px) {
+    .seed-help-bubble__content {
+        --seed-box-max-width: var(--seed-box-max-width-lg);
+    }
+}
+@media (min-width: 1440px) {
+    .seed-help-bubble__content {
+        --seed-box-max-width: var(--seed-box-max-width-xl);
+    }
 }

package/recipes/help-bubble.layered.css

@@ -12,7 +12,12 @@
     padding-top: var(--seed-dimension-x2_5);
     padding-bottom: var(--seed-dimension-x2_5);
     border-radius: var(--seed-radius-r3);
-    --seed-box-max-width: initial;
+    --seed-box-max-width-base: initial;
+    --seed-box-max-width-sm: var(--seed-box-max-width-base);
+    --seed-box-max-width-md: var(--seed-box-max-width-sm);
+    --seed-box-max-width-lg: var(--seed-box-max-width-md);
+    --seed-box-max-width-xl: var(--seed-box-max-width-lg);
+    --seed-box-max-width: var(--seed-box-max-width-base);
     max-width: var(--seed-box-max-width);
     align-items: flex-start;
     display: flex;
@@ -39,6 +44,10 @@
     animation-fill-mode: forwards;
   }
 
+  .seed-help-bubble__content[data-instant] {
+    animation-duration: 0s;
+  }
+
   .seed-help-bubble__content:is([hidden], [data-hidden]) {
     display: none !important;
   }
@@ -105,4 +114,28 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }
+
+  @media (width >= 480px) {
+    .seed-help-bubble__content {
+      --seed-box-max-width: var(--seed-box-max-width-sm);
+    }
+  }
+
+  @media (width >= 768px) {
+    .seed-help-bubble__content {
+      --seed-box-max-width: var(--seed-box-max-width-md);
+    }
+  }
+
+  @media (width >= 1280px) {
+    .seed-help-bubble__content {
+      --seed-box-max-width: var(--seed-box-max-width-lg);
+    }
+  }
+
+  @media (width >= 1440px) {
+    .seed-help-bubble__content {
+      --seed-box-max-width: var(--seed-box-max-width-xl);
+    }
+  }
 }

package/recipes/image-frame.css

@@ -30,7 +30,4 @@
     pointer-events: none;
     border-radius: inherit;
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
-}
-.seed-image-frame__root--rounded_true {
-    border-radius: var(--seed-radius-r2);
 }

package/recipes/image-frame.d.ts

@@ -3,10 +3,6 @@ declare interface ImageFrameVariant {
   * @default false
   */
   stroke: boolean;
-/**
-  * @default false
-  */
-  rounded: boolean;
 }
 
 declare type ImageFrameVariantMap = {

package/recipes/image-frame.layered.css

@@ -34,8 +34,4 @@
     position: absolute;
     inset: 0;
   }
-
-  .seed-image-frame__root--rounded_true {
-    border-radius: var(--seed-radius-r2);
-  }
 }

package/recipes/image-frame.layered.mjs

@@ -17,8 +17,7 @@ const imageFrameSlotNames = [
 ];
 
 const defaultVariant = {
-  "stroke": false,
-  "rounded": false
+  "stroke": false
 };
 
 const compoundVariants = [];
@@ -27,10 +26,6 @@ export const imageFrameVariantMap = {
   "stroke": [
     true,
     false
-  ],
-  "rounded": [
-    true,
-    false
   ]
 };
 

package/recipes/image-frame.mjs

@@ -17,8 +17,7 @@ const imageFrameSlotNames = [
 ];
 
 const defaultVariant = {
-  "stroke": false,
-  "rounded": false
+  "stroke": false
 };
 
 const compoundVariants = [];
@@ -27,10 +26,6 @@ export const imageFrameVariantMap = {
   "stroke": [
     true,
     false
-  ],
-  "rounded": [
-    true,
-    false
   ]
 };