@seed-design/css 1.2.15 → 2.0.0

package/recipes/accordion.css

@@ -0,0 +1,268 @@
+.seed-accordion__root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.seed-accordion__item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.seed-accordion__header {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+}
+.seed-accordion__trigger {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    text-align: start;
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-accordion__trigger:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-accordion__trigger:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+}
+.seed-accordion__prefix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    --seed-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-accordion__prefix:is(:disabled, [disabled], [data-disabled]) {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-accordion__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--seed-dimension-x0_5);
+    min-width: 0;
+}
+.seed-accordion__title {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-medium);
+}
+.seed-accordion__title:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-accordion__description {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-medium);
+}
+.seed-accordion__description:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-accordion__suffixIcon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    color: var(--seed-color-fg-neutral-subtle);
+    transform: rotate(0deg);
+    transition: transform var(--seed-duration-d6) var(--seed-timing-function-easing);
+}
+.seed-accordion__suffixIcon:is([data-state="open"], [data-open]) {
+    transform: rotate(180deg);
+}
+.seed-accordion__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-accordion__content {
+    overflow: hidden;
+    height: 0;
+    opacity: 0;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+}
+.seed-accordion__content:is([data-state="open"], [data-open]) {
+    height: var(--collapsible-content-height);
+    opacity: 1;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+}
+.seed-accordion__item--variant_inline {
+    position: relative;
+}
+.seed-accordion__item--variant_inline:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: var(--seed-dimension-x3);
+    right: var(--seed-dimension-x3);
+    height: 1px;
+    background-color: var(--seed-color-stroke-neutral-subtle);
+}
+.seed-accordion__trigger--variant_inline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    transition-property: background-color, left, right, border-radius;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+        left: var(--seed-dimension-x1_5);
+        right: var(--seed-dimension-x1_5);
+        border-radius: var(--seed-dimension-x2_5);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+        left: var(--seed-dimension-x1_5);
+        right: var(--seed-dimension-x1_5);
+        border-radius: var(--seed-dimension-x2_5);
+    }
+}
+.seed-accordion__item--variant_separated {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-radius: var(--seed-radius-r3);
+    overflow: hidden;
+}
+.seed-accordion__trigger--variant_separated::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    transition-property: background-color;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
+.seed-accordion__trigger--size_medium {
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4);
+}
+.seed-accordion__prefix--size_medium {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+}
+.seed-accordion__title--size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-accordion__description--size_medium {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+}
+.seed-accordion__suffixIcon--size_medium {
+    --seed-suffix-icon-size: var(--seed-dimension-x5);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+}
+.seed-accordion__trigger--size_large {
+    padding-top: var(--seed-dimension-x5);
+    padding-bottom: var(--seed-dimension-x5);
+}
+.seed-accordion__prefix--size_large {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+}
+.seed-accordion__title--size_large {
+    font-size: var(--seed-font-size-t7);
+    line-height: var(--seed-line-height-t7);
+}
+.seed-accordion__description--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-accordion__suffixIcon--size_large {
+    --seed-suffix-icon-size: var(--seed-dimension-x6);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+}
+.seed-accordion__trigger--size_responsive {
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4);
+}
+@media (min-width: 768px) {
+    .seed-accordion__trigger--size_responsive {
+        padding-top: var(--seed-dimension-x5);
+        padding-bottom: var(--seed-dimension-x5);
+    }
+}
+.seed-accordion__prefix--size_responsive {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+}
+@media (min-width: 768px) {
+    .seed-accordion__prefix--size_responsive {
+        margin-right: var(--seed-dimension-x3);
+        --seed-icon-size: 22px;
+    }
+}
+.seed-accordion__title--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 768px) {
+    .seed-accordion__title--size_responsive {
+        font-size: var(--seed-font-size-t7);
+        line-height: var(--seed-line-height-t7);
+    }
+}
+.seed-accordion__description--size_responsive {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+}
+@media (min-width: 768px) {
+    .seed-accordion__description--size_responsive {
+        font-size: var(--seed-font-size-t5);
+        line-height: var(--seed-line-height-t5);
+    }
+}
+.seed-accordion__suffixIcon--size_responsive {
+    --seed-suffix-icon-size: var(--seed-dimension-x5);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+}
+@media (min-width: 768px) {
+    .seed-accordion__suffixIcon--size_responsive {
+        --seed-suffix-icon-size: var(--seed-dimension-x6);
+        --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+    }
+}
+.seed-accordion__root--variant_separated-size_medium {
+    gap: var(--seed-dimension-x3);
+}
+.seed-accordion__root--variant_separated-size_large {
+    gap: var(--seed-dimension-x4);
+}
+.seed-accordion__root--variant_separated-size_responsive {
+    gap: var(--seed-dimension-x3);
+}
+@media (min-width: 768px) {
+    .seed-accordion__root--variant_separated-size_responsive {
+        gap: var(--seed-dimension-x4);
+    }
+}

package/recipes/accordion.d.ts

@@ -0,0 +1,33 @@
+declare interface AccordionVariant {
+  /**
+  * - `inline`: Accordion Item들이 하나의 연속된 목록처럼 표현됩니다. 밀접하게 관련된 항목들을 컴팩트하게 나열할 때 사용합니다.
+  * - `separated`: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+  *
+  * @default "inline"
+  */
+  variant: "inline" | "separated";
+/**
+  * - `responsive`: 뷰포트 너비에 따라 적용되는 사이즈가 달라집니다. Breakpoint `md` 미만에서는 `medium`, `md` 이상에서는 `large`로 적용됩니다.
+  *
+  * @default "medium"
+  */
+  size: "medium" | "large" | "responsive";
+}
+
+declare type AccordionVariantMap = {
+  [key in keyof AccordionVariant]: Array<AccordionVariant[key]>;
+};
+
+export declare type AccordionVariantProps = Partial<AccordionVariant>;
+
+export declare type AccordionSlotName = "root" | "item" | "header" | "trigger" | "prefix" | "body" | "title" | "description" | "suffixIcon" | "content";
+
+export declare const accordionVariantMap: AccordionVariantMap;
+
+export declare const accordion: ((
+  props?: AccordionVariantProps,
+) => Record<AccordionSlotName, string>) & {
+  splitVariantProps: <T extends AccordionVariantProps>(
+    props: T,
+  ) => [AccordionVariantProps, Omit<T, keyof AccordionVariantProps>];
+}

package/recipes/accordion.layered.css

@@ -0,0 +1,308 @@
+@layer seed-components {
+  .seed-accordion__root, .seed-accordion__item {
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  .seed-accordion__header {
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  .seed-accordion__trigger {
+    isolation: isolate;
+    cursor: pointer;
+    text-align: start;
+    width: 100%;
+    padding: 0;
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+    background: none;
+    border: none;
+    align-items: center;
+    font-family: inherit;
+    display: flex;
+    position: relative;
+  }
+
+  .seed-accordion__trigger:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-accordion__trigger:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .seed-accordion__prefix {
+    --seed-icon-color: var(--seed-color-fg-neutral);
+    flex-shrink: 0;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .seed-accordion__prefix:is(:disabled, [disabled], [data-disabled]) {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-accordion__body {
+    gap: var(--seed-dimension-x0_5);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .seed-accordion__title {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-accordion__title:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-accordion__description {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-accordion__description:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-accordion__suffixIcon {
+    color: var(--seed-color-fg-neutral-subtle);
+    transition: transform var(--seed-duration-d6) var(--seed-timing-function-easing);
+    flex-shrink: 0;
+    align-items: center;
+    margin-left: auto;
+    display: inline-flex;
+    transform: rotate(0);
+  }
+
+  .seed-accordion__suffixIcon:is([data-state="open"], [data-open]) {
+    transform: rotate(180deg);
+  }
+
+  .seed-accordion__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-accordion__content {
+    opacity: 0;
+    height: 0;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+    overflow: hidden;
+  }
+
+  .seed-accordion__content:is([data-state="open"], [data-open]) {
+    height: var(--collapsible-content-height);
+    opacity: 1;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+  }
+
+  .seed-accordion__item--variant_inline {
+    position: relative;
+  }
+
+  .seed-accordion__item--variant_inline:not(:last-child):after {
+    content: "";
+    bottom: 0;
+    left: var(--seed-dimension-x3);
+    right: var(--seed-dimension-x3);
+    background-color: var(--seed-color-stroke-neutral-subtle);
+    height: 1px;
+    position: absolute;
+  }
+
+  .seed-accordion__trigger--variant_inline:before {
+    content: "";
+    z-index: -1;
+    transition-property: background-color, left, right, border-radius;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+      left: var(--seed-dimension-x1_5);
+      right: var(--seed-dimension-x1_5);
+      border-radius: var(--seed-dimension-x2_5);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+      left: var(--seed-dimension-x1_5);
+      right: var(--seed-dimension-x1_5);
+      border-radius: var(--seed-dimension-x2_5);
+    }
+  }
+
+  .seed-accordion__item--variant_separated {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-radius: var(--seed-radius-r3);
+    overflow: hidden;
+  }
+
+  .seed-accordion__trigger--variant_separated:before {
+    content: "";
+    z-index: -1;
+    transition-property: background-color;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  .seed-accordion__trigger--size_medium {
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4);
+  }
+
+  .seed-accordion__prefix--size_medium {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+  }
+
+  .seed-accordion__title--size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  .seed-accordion__description--size_medium {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-accordion__suffixIcon--size_medium {
+    --seed-suffix-icon-size: var(--seed-dimension-x5);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+  }
+
+  .seed-accordion__trigger--size_large {
+    padding-top: var(--seed-dimension-x5);
+    padding-bottom: var(--seed-dimension-x5);
+  }
+
+  .seed-accordion__prefix--size_large {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+  }
+
+  .seed-accordion__title--size_large {
+    font-size: var(--seed-font-size-t7);
+    line-height: var(--seed-line-height-t7);
+  }
+
+  .seed-accordion__description--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  .seed-accordion__suffixIcon--size_large {
+    --seed-suffix-icon-size: var(--seed-dimension-x6);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+  }
+
+  .seed-accordion__trigger--size_responsive {
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4);
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__trigger--size_responsive {
+      padding-top: var(--seed-dimension-x5);
+      padding-bottom: var(--seed-dimension-x5);
+    }
+  }
+
+  .seed-accordion__prefix--size_responsive {
+    margin-right: var(--seed-dimension-x3);
+    --seed-icon-size: 22px;
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__prefix--size_responsive {
+      margin-right: var(--seed-dimension-x3);
+      --seed-icon-size: 22px;
+    }
+  }
+
+  .seed-accordion__title--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__title--size_responsive {
+      font-size: var(--seed-font-size-t7);
+      line-height: var(--seed-line-height-t7);
+    }
+  }
+
+  .seed-accordion__description--size_responsive {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__description--size_responsive {
+      font-size: var(--seed-font-size-t5);
+      line-height: var(--seed-line-height-t5);
+    }
+  }
+
+  .seed-accordion__suffixIcon--size_responsive {
+    --seed-suffix-icon-size: var(--seed-dimension-x5);
+    --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__suffixIcon--size_responsive {
+      --seed-suffix-icon-size: var(--seed-dimension-x6);
+      --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
+    }
+  }
+
+  .seed-accordion__root--variant_separated-size_medium {
+    gap: var(--seed-dimension-x3);
+  }
+
+  .seed-accordion__root--variant_separated-size_large {
+    gap: var(--seed-dimension-x4);
+  }
+
+  .seed-accordion__root--variant_separated-size_responsive {
+    gap: var(--seed-dimension-x3);
+  }
+
+  @media (width >= 768px) {
+    .seed-accordion__root--variant_separated-size_responsive {
+      gap: var(--seed-dimension-x4);
+    }
+  }
+}

package/recipes/accordion.layered.mjs

@@ -0,0 +1,94 @@
+import './accordion.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const accordionSlotNames = [
+  [
+    "root",
+    "seed-accordion__root"
+  ],
+  [
+    "item",
+    "seed-accordion__item"
+  ],
+  [
+    "header",
+    "seed-accordion__header"
+  ],
+  [
+    "trigger",
+    "seed-accordion__trigger"
+  ],
+  [
+    "prefix",
+    "seed-accordion__prefix"
+  ],
+  [
+    "body",
+    "seed-accordion__body"
+  ],
+  [
+    "title",
+    "seed-accordion__title"
+  ],
+  [
+    "description",
+    "seed-accordion__description"
+  ],
+  [
+    "suffixIcon",
+    "seed-accordion__suffixIcon"
+  ],
+  [
+    "content",
+    "seed-accordion__content"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "inline",
+  "size": "medium"
+};
+
+const compoundVariants = [
+  {
+    "variant": "separated",
+    "size": "medium"
+  },
+  {
+    "variant": "separated",
+    "size": "large"
+  },
+  {
+    "variant": "separated",
+    "size": "responsive"
+  }
+];
+
+export const accordionVariantMap = {
+  "variant": [
+    "inline",
+    "separated"
+  ],
+  "size": [
+    "medium",
+    "large",
+    "responsive"
+  ]
+};
+
+export const accordionVariantKeys = Object.keys(accordionVariantMap);
+
+export function accordion(props) {
+  return Object.fromEntries(
+    accordionSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(accordion, { splitVariantProps: (props) => splitVariantProps(props, accordionVariantMap) });
+
+// @recipe(seed): accordion