@seed-design/css 1.2.16 → 2.0.0

package/recipes/attachment-input-trigger.mjs

@@ -0,0 +1,48 @@
+import './attachment-input-trigger.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputTriggerSlotNames = [
+  [
+    "root",
+    "seed-attachment-input-trigger__root"
+  ],
+  [
+    "icon",
+    "seed-attachment-input-trigger__icon"
+  ],
+  [
+    "itemCountArea",
+    "seed-attachment-input-trigger__itemCountArea"
+  ],
+  [
+    "itemCount",
+    "seed-attachment-input-trigger__itemCount"
+  ],
+  [
+    "maxItemCount",
+    "seed-attachment-input-trigger__maxItemCount"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const attachmentInputTriggerVariantMap = {};
+
+export const attachmentInputTriggerVariantKeys = Object.keys(attachmentInputTriggerVariantMap);
+
+export function attachmentInputTrigger(props) {
+  return Object.fromEntries(
+    attachmentInputTriggerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInputTrigger, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputTriggerVariantMap) });
+
+// @recipe(seed): attachment-input-trigger

package/recipes/attachment-input.css

@@ -0,0 +1,55 @@
+.seed-attachment-input__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-dimension-x2);
+    margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
+    margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
+}
+.seed-attachment-input__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    gap: var(--seed-dimension-x2);
+    border: 1px dashed var(--seed-color-palette-gray-500);
+    border-radius: var(--seed-radius-r3);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    margin-left: var(--seed-attachment-input-extend-x);
+    margin-right: var(--seed-attachment-input-extend-x);
+    transition: border-color 0.2s;
+}
+.seed-attachment-input__dropzone[data-dragging-over] {
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-solid);
+}
+.seed-attachment-input__dropzone:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+}
+.seed-attachment-input__dropzoneLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-font-size-t4);
+    font-weight: var(--seed-font-weight-medium);
+    text-align: center;
+}
+.seed-attachment-input__dropzoneLabel:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-attachment-input__container {
+    display: flex;
+    gap: var(--seed-dimension-x2);
+    overflow-x: auto;
+    padding-top: var(--seed-dimension-x1);
+    margin-top: calc(var(--seed-dimension-x1) * -1);
+    padding-left: var(--seed-attachment-input-extend-x);
+    padding-right: var(--seed-attachment-input-extend-x);
+}
+.seed-attachment-input__itemGroup {
+    display: flex;
+    gap: var(--seed-dimension-x2);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}

package/recipes/attachment-input.d.ts

@@ -0,0 +1,21 @@
+declare interface AttachmentInputVariant {
+  
+}
+
+declare type AttachmentInputVariantMap = {
+  [key in keyof AttachmentInputVariant]: Array<AttachmentInputVariant[key]>;
+};
+
+export declare type AttachmentInputVariantProps = Partial<AttachmentInputVariant>;
+
+export declare type AttachmentInputSlotName = "root" | "dropzone" | "dropzoneLabel" | "container" | "itemGroup";
+
+export declare const attachmentInputVariantMap: AttachmentInputVariantMap;
+
+export declare const attachmentInput: ((
+  props?: AttachmentInputVariantProps,
+) => Record<AttachmentInputSlotName, string>) & {
+  splitVariantProps: <T extends AttachmentInputVariantProps>(
+    props: T,
+  ) => [AttachmentInputVariantProps, Omit<T, keyof AttachmentInputVariantProps>];
+}

package/recipes/attachment-input.layered.css

@@ -0,0 +1,64 @@
+@layer seed-components {
+  .seed-attachment-input__root {
+    gap: var(--seed-dimension-x2);
+    margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
+    margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .seed-attachment-input__dropzone {
+    justify-content: center;
+    align-items: center;
+    gap: var(--seed-dimension-x2);
+    border: 1px dashed var(--seed-color-palette-gray-500);
+    border-radius: var(--seed-radius-r3);
+    height: 120px;
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    margin-left: var(--seed-attachment-input-extend-x);
+    margin-right: var(--seed-attachment-input-extend-x);
+    flex-direction: column;
+    transition: border-color .2s;
+    display: flex;
+  }
+
+  .seed-attachment-input__dropzone[data-dragging-over] {
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-solid);
+  }
+
+  .seed-attachment-input__dropzone:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .seed-attachment-input__dropzoneLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-font-size-t4);
+    font-weight: var(--seed-font-weight-medium);
+    text-align: center;
+  }
+
+  .seed-attachment-input__dropzoneLabel:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-attachment-input__container {
+    gap: var(--seed-dimension-x2);
+    padding-top: var(--seed-dimension-x1);
+    margin-top: calc(var(--seed-dimension-x1) * -1);
+    padding-left: var(--seed-attachment-input-extend-x);
+    padding-right: var(--seed-attachment-input-extend-x);
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .seed-attachment-input__itemGroup {
+    gap: var(--seed-dimension-x2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+}

package/recipes/attachment-input.layered.mjs

@@ -0,0 +1,48 @@
+import './attachment-input.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputSlotNames = [
+  [
+    "root",
+    "seed-attachment-input__root"
+  ],
+  [
+    "dropzone",
+    "seed-attachment-input__dropzone"
+  ],
+  [
+    "dropzoneLabel",
+    "seed-attachment-input__dropzoneLabel"
+  ],
+  [
+    "container",
+    "seed-attachment-input__container"
+  ],
+  [
+    "itemGroup",
+    "seed-attachment-input__itemGroup"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const attachmentInputVariantMap = {};
+
+export const attachmentInputVariantKeys = Object.keys(attachmentInputVariantMap);
+
+export function attachmentInput(props) {
+  return Object.fromEntries(
+    attachmentInputSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInput, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputVariantMap) });
+
+// @recipe(seed): attachment-input

package/recipes/attachment-input.mjs

@@ -0,0 +1,48 @@
+import './attachment-input.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputSlotNames = [
+  [
+    "root",
+    "seed-attachment-input__root"
+  ],
+  [
+    "dropzone",
+    "seed-attachment-input__dropzone"
+  ],
+  [
+    "dropzoneLabel",
+    "seed-attachment-input__dropzoneLabel"
+  ],
+  [
+    "container",
+    "seed-attachment-input__container"
+  ],
+  [
+    "itemGroup",
+    "seed-attachment-input__itemGroup"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const attachmentInputVariantMap = {};
+
+export const attachmentInputVariantKeys = Object.keys(attachmentInputVariantMap);
+
+export function attachmentInput(props) {
+  return Object.fromEntries(
+    attachmentInputSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInput, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputVariantMap) });
+
+// @recipe(seed): attachment-input

package/recipes/avatar.d.ts

@@ -1,5 +1,14 @@
 declare interface AvatarVariant {
   /**
+  * - `20`: 대표 사용처: 댓글을 남긴 사용자
+  * - `24`: 대표 사용처: 답글 프로필
+  * - `36`: 대표 사용처: 댓글 프로필
+  * - `42`: 대표 사용처: 게시글 상세 내 프로필
+  * - `48`: 대표 사용처: 작은 리스트
+  * - `56`: 대표 사용처: 큰 리스트
+  * - `64`: 대표 사용처: 프로필 상세, 캐러셀
+  * - `108`: 대표 사용처: 프로필 수정
+  *
   * @default 48
   */
   size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";

package/recipes/badge.d.ts

@@ -4,10 +4,20 @@ declare interface BadgeVariant {
   */
   size: "medium" | "large";
 /**
+  * - `weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+  * - `solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+  * - `outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+  *
   * @default "solid"
   */
   variant: "weak" | "solid" | "outline";
 /**
+  * - `neutral`: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+  * - `informative`: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+  * - `positive`: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+  * - `warning`: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+  * - `critical`: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
+  *
   * @default "neutral"
   */
   tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";

package/recipes/bottom-sheet.css

@@ -51,6 +51,9 @@
 .seed-bottom-sheet__content[data-delayed-snap-points='true'] {
     transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
+.seed-bottom-sheet__content:is(:focus, [data-focus]) {
+    outline: none;
+}
 .seed-bottom-sheet__content::after {
     top: 100%;
     height: 200vh;
@@ -89,10 +92,30 @@
 .seed-bottom-sheet__body {
     display: flex;
     flex-direction: column;
-    --seed-box-padding-x: var(--seed-dimension-spacing-x-global-gutter);
-    --seed-box-height: initial;
-    --seed-box-min-height: initial;
-    --seed-box-max-height: initial;
+    --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
+    --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
+    --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
+    --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
+    --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
+    --seed-box-padding-x: var(--seed-box-padding-x-base);
+    --seed-box-height-base: initial;
+    --seed-box-height-sm: var(--seed-box-height-base);
+    --seed-box-height-md: var(--seed-box-height-sm);
+    --seed-box-height-lg: var(--seed-box-height-md);
+    --seed-box-height-xl: var(--seed-box-height-lg);
+    --seed-box-height: var(--seed-box-height-base);
+    --seed-box-min-height-base: initial;
+    --seed-box-min-height-sm: var(--seed-box-min-height-base);
+    --seed-box-min-height-md: var(--seed-box-min-height-sm);
+    --seed-box-min-height-lg: var(--seed-box-min-height-md);
+    --seed-box-min-height-xl: var(--seed-box-min-height-lg);
+    --seed-box-min-height: var(--seed-box-min-height-base);
+    --seed-box-max-height-base: initial;
+    --seed-box-max-height-sm: var(--seed-box-max-height-base);
+    --seed-box-max-height-md: var(--seed-box-max-height-sm);
+    --seed-box-max-height-lg: var(--seed-box-max-height-md);
+    --seed-box-max-height-xl: var(--seed-box-max-height-lg);
+    --seed-box-max-height: var(--seed-box-max-height-base);
     --seed-box-justify-content: initial;
     --seed-box-align-items: initial;
     padding-left: var(--seed-box-padding-x);
@@ -134,6 +157,7 @@
     right: calc((28px - 44px) / 2);
     bottom: calc((28px - 44px) / 2);
     left: calc((28px - 44px) / 2);
+    border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -142,7 +166,6 @@
     outline: none;
 }
 .seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
-    border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }
@@ -178,6 +201,7 @@
     animation-name: fade-out;
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
+    animation-fill-mode: forwards;
 }
 .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='true'][data-should-overlay-animate='true']:not([data-animation-done='true']) {
     animation-name: fade-in;
@@ -197,9 +221,42 @@
     animation-name: drawer-slide-to-bottom;
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
+    animation-fill-mode: forwards;
 }
 .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points='true']:not([data-animation-done='true']) {
     animation-name: drawer-slide-from-bottom;
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+@media (min-width: 480px) {
+    .seed-bottom-sheet__body {
+        --seed-box-padding-x: var(--seed-box-padding-x-sm);
+        --seed-box-height: var(--seed-box-height-sm);
+        --seed-box-min-height: var(--seed-box-min-height-sm);
+        --seed-box-max-height: var(--seed-box-max-height-sm);
+    }
+}
+@media (min-width: 768px) {
+    .seed-bottom-sheet__body {
+        --seed-box-padding-x: var(--seed-box-padding-x-md);
+        --seed-box-height: var(--seed-box-height-md);
+        --seed-box-min-height: var(--seed-box-min-height-md);
+        --seed-box-max-height: var(--seed-box-max-height-md);
+    }
+}
+@media (min-width: 1280px) {
+    .seed-bottom-sheet__body {
+        --seed-box-padding-x: var(--seed-box-padding-x-lg);
+        --seed-box-height: var(--seed-box-height-lg);
+        --seed-box-min-height: var(--seed-box-min-height-lg);
+        --seed-box-max-height: var(--seed-box-max-height-lg);
+    }
+}
+@media (min-width: 1440px) {
+    .seed-bottom-sheet__body {
+        --seed-box-padding-x: var(--seed-box-padding-x-xl);
+        --seed-box-height: var(--seed-box-height-xl);
+        --seed-box-min-height: var(--seed-box-min-height-xl);
+        --seed-box-max-height: var(--seed-box-max-height-xl);
+    }
 }

package/recipes/bottom-sheet.layered.css

@@ -50,6 +50,10 @@
     transform: translate3d(0, var(--snap-point-height, 0), 0);
   }
 
+  .seed-bottom-sheet__content:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
   .seed-bottom-sheet__content:after {
     content: "";
     background: inherit;
@@ -90,10 +94,30 @@
   }
 
   .seed-bottom-sheet__body {
-    --seed-box-padding-x: var(--seed-dimension-spacing-x-global-gutter);
-    --seed-box-height: initial;
-    --seed-box-min-height: initial;
-    --seed-box-max-height: initial;
+    --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
+    --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
+    --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
+    --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
+    --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
+    --seed-box-padding-x: var(--seed-box-padding-x-base);
+    --seed-box-height-base: initial;
+    --seed-box-height-sm: var(--seed-box-height-base);
+    --seed-box-height-md: var(--seed-box-height-sm);
+    --seed-box-height-lg: var(--seed-box-height-md);
+    --seed-box-height-xl: var(--seed-box-height-lg);
+    --seed-box-height: var(--seed-box-height-base);
+    --seed-box-min-height-base: initial;
+    --seed-box-min-height-sm: var(--seed-box-min-height-base);
+    --seed-box-min-height-md: var(--seed-box-min-height-sm);
+    --seed-box-min-height-lg: var(--seed-box-min-height-md);
+    --seed-box-min-height-xl: var(--seed-box-min-height-lg);
+    --seed-box-min-height: var(--seed-box-min-height-base);
+    --seed-box-max-height-base: initial;
+    --seed-box-max-height-sm: var(--seed-box-max-height-base);
+    --seed-box-max-height-md: var(--seed-box-max-height-sm);
+    --seed-box-max-height-lg: var(--seed-box-max-height-md);
+    --seed-box-max-height-xl: var(--seed-box-max-height-lg);
+    --seed-box-max-height: var(--seed-box-max-height-base);
     --seed-box-justify-content: initial;
     --seed-box-align-items: initial;
     padding-left: var(--seed-box-padding-x);
@@ -135,6 +159,7 @@
 
   .seed-bottom-sheet__closeButton:after {
     content: "";
+    border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -147,7 +172,6 @@
   }
 
   .seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
-    border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }
@@ -191,6 +215,7 @@
     animation-name: fade-out;
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
+    animation-fill-mode: forwards;
   }
 
   .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"]:not([data-animation-done="true"]) {
@@ -214,6 +239,7 @@
     animation-name: drawer-slide-to-bottom;
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
+    animation-fill-mode: forwards;
   }
 
   .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points="true"]:not([data-animation-done="true"]) {
@@ -221,4 +247,40 @@
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter-expressive);
   }
+
+  @media (width >= 480px) {
+    .seed-bottom-sheet__body {
+      --seed-box-padding-x: var(--seed-box-padding-x-sm);
+      --seed-box-height: var(--seed-box-height-sm);
+      --seed-box-min-height: var(--seed-box-min-height-sm);
+      --seed-box-max-height: var(--seed-box-max-height-sm);
+    }
+  }
+
+  @media (width >= 768px) {
+    .seed-bottom-sheet__body {
+      --seed-box-padding-x: var(--seed-box-padding-x-md);
+      --seed-box-height: var(--seed-box-height-md);
+      --seed-box-min-height: var(--seed-box-min-height-md);
+      --seed-box-max-height: var(--seed-box-max-height-md);
+    }
+  }
+
+  @media (width >= 1280px) {
+    .seed-bottom-sheet__body {
+      --seed-box-padding-x: var(--seed-box-padding-x-lg);
+      --seed-box-height: var(--seed-box-height-lg);
+      --seed-box-min-height: var(--seed-box-min-height-lg);
+      --seed-box-max-height: var(--seed-box-max-height-lg);
+    }
+  }
+
+  @media (width >= 1440px) {
+    .seed-bottom-sheet__body {
+      --seed-box-padding-x: var(--seed-box-padding-x-xl);
+      --seed-box-height: var(--seed-box-height-xl);
+      --seed-box-min-height: var(--seed-box-min-height-xl);
+      --seed-box-max-height: var(--seed-box-max-height-xl);
+    }
+  }
 }

package/recipes/callout.d.ts

@@ -1,5 +1,12 @@
 declare interface CalloutVariant {
   /**
+  * - `neutral`: 일반적인 정보를 전달합니다.
+  * - `informative`: 유용한 정보를 제공합니다.
+  * - `positive`: 긍정적인 상태를 나타냅니다.
+  * - `warning`: 주의가 필요한 상태를 나타냅니다.
+  * - `critical`: 중요한 문제를 나타냅니다.
+  * - `magic`: AI 기능을 나타냅니다.
+  *
   * @default "neutral"
   */
   tone: "neutral" | "informative" | "positive" | "warning" | "critical" | "magic";

package/recipes/checkmark.d.ts

@@ -1,5 +1,8 @@
 declare interface CheckmarkVariant {
   /**
+  * - `square`: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
+  * - `ghost`: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
+  *
   * @default "square"
   */
   variant: "square" | "ghost";

package/recipes/chip-tabs.css

@@ -46,8 +46,6 @@
     white-space: nowrap;
     font-family: inherit;
     border-radius: var(--seed-radius-full);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
     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);
     outline: var(--seed-dimension-x0_5) solid transparent;
@@ -62,18 +60,20 @@
 }
 .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 {
     gap: 8px;
 }
 .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 {
     background-color: var(--seed-color-bg-neutral-weak-alpha);
@@ -105,11 +105,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: 0.5;
 }
 .seed-chip-tabs__trigger--variant_neutralOutline {
     background-color: var(--seed-color-bg-transparent);
@@ -143,47 +139,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: 0.5;
 }
 .seed-chip-tabs__root--contentLayout_fill {
     display: flex;

package/recipes/chip-tabs.d.ts

@@ -6,7 +6,7 @@ declare interface ChipTabsVariant {
 /**
   * @default "neutralSolid"
   */
-  variant: "neutralSolid" | "neutralOutline" | "brandSolid";
+  variant: "neutralSolid" | "neutralOutline";
 /**
   * @default "hug"
   */