@seed-design/rootage-artifacts 1.2.11 → 2.0.0

package/__generated__/timing-function.json

@@ -0,0 +1,103 @@
+{
+  "kind": "Tokens",
+  "metadata": {
+    "id": "timing-function",
+    "name": "Timing Function"
+  },
+  "data": {
+    "collection": "global",
+    "tokens": {
+      "$timing-function.linear": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0,
+              0,
+              1,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.easing": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              0.35,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.enter": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0,
+              0,
+              0.15,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.exit": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              1,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.enter-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.03,
+              0.4,
+              0.1,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.exit-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              0.95,
+              0.55
+            ]
+          }
+        }
+      },
+      "$timing-function.pressed-scale": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0,
+              0,
+              0.15,
+              1
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/collections.yaml

@@ -5,8 +5,20 @@ metadata:
 data:
   - name: global
     modes:
-      - default
+      - id: default
   - name: color
     modes:
-      - theme-light
-      - theme-dark
+      - id: theme-light
+      - id: theme-dark
+  - name: viewport-width
+    modes:
+      - id: base
+        description: "세로 모드 폰"
+      - id: sm
+        description: "가로 모드 폰 또는 좁은 태블릿"
+      - id: md
+        description: "태블릿"
+      - id: lg
+        description: "데스크톱"
+      - id: xl
+        description: "넓은 데스크톱"

package/color.yaml

@@ -2,7 +2,7 @@ kind: Tokens
 metadata:
   id: color
   name: Color
-  lastUpdated: 26-01-15
+  lastUpdated: 26-06-15
 data:
   collection: color
   tokens:
@@ -539,11 +539,6 @@ data:
       values:
         theme-light: $color.palette.gray-100
         theme-dark: $color.palette.gray-300
-    $color.bg.layer-fill:
-      description: "@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다."
-      values:
-        theme-light: $color.palette.gray-100
-        theme-dark: $color.palette.gray-200
     $color.bg.layer-floating:
       description: 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다.
       values:
@@ -639,6 +634,14 @@ data:
       values:
         theme-light: $color.palette.static-black-alpha-100
         theme-dark: $color.palette.static-white-alpha-50
+    $color.bg.transparent-selected:
+      values:
+        theme-light: $color.palette.static-black-alpha-200
+        theme-dark: $color.palette.static-white-alpha-100
+    $color.bg.transparent-selected-pressed:
+      values:
+        theme-light: $color.palette.static-black-alpha-300
+        theme-dark: $color.palette.static-white-alpha-200
     $color.bg.warning-solid:
       description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid)
       values:
@@ -679,6 +682,10 @@ data:
       values:
         theme-light: $color.palette.red-300
         theme-dark: $color.palette.red-300
+    $color.stroke.focus-ring:
+      values:
+        theme-light: $color.palette.blue-600
+        theme-dark: $color.palette.blue-600
     $color.stroke.informative-solid:
       description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)
       values:
@@ -734,10 +741,6 @@ data:
       values:
         theme-light: $color.palette.yellow-300
         theme-dark: $color.palette.yellow-300
-    $color.stroke.focus-ring:
-      values:
-        theme-light: $color.palette.blue-600
-        theme-dark: $color.palette.blue-600
     $color.manner-temp.l1.bg:
       values:
         theme-light: "#f1f2f3"

package/components/accordion-item.yaml

@@ -0,0 +1,193 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: accordion-item
+  name: Accordion Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          dividerColor:
+            type: color
+          dividerPaddingX:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+      trigger:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          color:
+            type: color
+          marginX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+      prefix:
+        properties:
+          paddingRight:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      title:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      description:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          paddingLeft:
+            type: dimension
+          rotateDuration:
+            type: duration
+          rotateTimingFunction:
+            type: cubicBezier
+      body:
+        properties:
+          gap:
+            type: dimension
+      content:
+        properties:
+          expandHeightDuration:
+            type: duration
+          expandHeightTimingFunction:
+            type: cubicBezier
+          collapseHeightDuration:
+            type: duration
+          collapseHeightTimingFunction:
+            type: cubicBezier
+    variants:
+      variant:
+        values:
+          inline:
+            description: Accordion Item들이 하나의 연속된 목록처럼 표현됩니다. 밀접하게 관련된 항목들을 컴팩트하게 나열할 때 사용합니다.
+          separated:
+            description: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+      size:
+        values:
+          medium: {}
+          large: {}
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        trigger:
+          paddingX: $dimension.spacing-x.global-gutter
+        body:
+          gap: $dimension.x0_5
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.medium
+        description:
+          color: $color.fg.neutral-subtle
+          fontWeight: $font-weight.medium
+        suffixIcon:
+          color: $color.fg.neutral-subtle
+          rotateDuration: $duration.d6
+          rotateTimingFunction: $timing-function.easing
+        content:
+          expandHeightDuration: $duration.d6
+          expandHeightTimingFunction: $timing-function.easing
+          collapseHeightDuration: $duration.d6
+          collapseHeightTimingFunction: $timing-function.easing
+      disabled:
+        prefixIcon:
+          color: $color.fg.disabled
+        title:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+      pressed:
+        trigger:
+          color: $color.bg.transparent-pressed
+          marginX: $dimension.x1_5
+          cornerRadius: $dimension.x2_5
+
+    size=medium:
+      enabled:
+        trigger:
+          paddingY: $dimension.x4
+        prefix:
+          paddingRight: $dimension.x3
+        prefixIcon:
+          size: 22px
+        title:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        suffixIcon:
+          size: $dimension.x5
+          paddingLeft: $dimension.x3
+
+    size=large:
+      enabled:
+        trigger:
+          paddingY: $dimension.x5
+        prefix:
+          paddingRight: $dimension.x3
+        prefixIcon:
+          size: 22px
+        title:
+          fontSize: $font-size.t7
+          lineHeight: $line-height.t7
+        description:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        suffixIcon:
+          size: $dimension.x6
+          paddingLeft: $dimension.x3
+
+    variant=inline:
+      enabled:
+        root:
+          dividerColor: $color.stroke.neutral-subtle
+          dividerPaddingX: $dimension.x3
+
+    variant=separated:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          cornerRadius: $radius.r3

package/components/accordion.yaml

@@ -0,0 +1,33 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: accordion
+  name: Accordion
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+    variants:
+      variant:
+        values:
+          inline:
+            description: Accordion Item들이 하나의 연속된 목록처럼 표현됩니다. 밀접하게 관련된 항목들을 컴팩트하게 나열할 때 사용합니다.
+          separated:
+            description: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+      size:
+        values:
+          medium: {}
+          large: {}
+  definitions:
+    variant=separated, size=medium:
+      enabled:
+        root:
+          gap: $dimension.x3
+
+    variant=separated, size=large:
+      enabled:
+        root:
+          gap: $dimension.x4

package/components/attachment-input-dropzone.yaml

@@ -0,0 +1,55 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: attachment-input-dropzone
+  name: Attachment Input Dropzone
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+        description: 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다.
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          height: 120px
+          gap: $dimension.x2
+          paddingX: $dimension.x4
+          cornerRadius: $radius.r3
+          strokeWidth: 1px
+          strokeColor: $color.palette.gray-500
+          # strokeStyle: dashed # maybe implement later
+        label:
+          color: $color.fg.neutral-subtle
+          fontSize: $font-size.t4
+          lineHeight: $font-size.t4
+          fontWeight: $font-weight.medium
+      draggingOver:
+        root:
+          strokeColor: $color.stroke.neutral-solid
+      disabled:
+        label:
+          color: $color.fg.disabled

package/components/attachment-input-item-action-button.yaml

@@ -0,0 +1,53 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: attachment-input-item-action-button
+  name: Attachment Input Item Action Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x1
+        icon:
+          size: $dimension.x6
+        label:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+          fontWeight: $font-weight.medium
+
+    type=file:
+      enabled:
+        icon:
+          color: $color.fg.neutral-subtle
+        label:
+          color: $color.fg.neutral-subtle
+
+    type=image:
+      enabled:
+        icon:
+          color: $color.palette.static-white
+        label:
+          color: $color.palette.static-white

package/components/attachment-input-item-remove-button.yaml

@@ -0,0 +1,48 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: attachment-input-item-remove-button
+  name: Attachment Input Item Remove Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          offset:
+            type: dimension
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x5
+          # targetSize: $dimension.x5
+          cornerRadius: $radius.full
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+          offset: $dimension.x1
+        icon:
+          size: $dimension.x2_5
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.layer-default-pressed
+      disabled:
+        icon:
+          color: $color.fg.disabled