@seed-design/rootage-artifacts 1.1.6 → 1.1.8

package/components/switch-mark.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, thumb
 kind: ComponentSpec
 metadata:
   id: switch-mark
@@ -59,6 +58,11 @@ data:
             type: duration
           translateTimingFunction:
             type: cubicBezier
+    variants:
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
   definitions:
     base:
       enabled:

package/components/switch.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, label
 kind: ComponentSpec
 metadata:
   id: switch

package/components/text-input.yaml

@@ -86,6 +86,13 @@ data:
             type: color
           size:
             type: dimension
+    variants:
+      variant:
+        values:
+          outline:
+            description: 기본 스타일입니다.
+          underline:
+            description: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
   definitions:
     base:
       enabled:

package/components/toggle-button.yaml

@@ -58,6 +58,13 @@ data:
             type: dimension
           thickness:
             type: dimension
+    variants:
+      variant:
+        values:
+          brandSolid:
+            description: 브랜드 컬러로 강조된 스타일입니다.
+          neutralWeak:
+            description: 기본적인 토글 스타일입니다.
   definitions:
     base:
       enabled:

package/components/top-navigation.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# slot=
 kind: ComponentSpec
 metadata:
   id: top-navigation
@@ -35,6 +34,8 @@ data:
             type: dimension
           fontWeight:
             type: number
+          lineHeight:
+            type: dimension
       subtitle:
         properties:
           color:
@@ -43,6 +44,8 @@ data:
             type: dimension
           fontWeight:
             type: number
+          lineHeight:
+            type: dimension
   definitions:
     theme=cupertino:
       enabled:

package/components/typography.yaml

@@ -14,6 +14,63 @@ data:
             type: dimension
           fontWeight:
             type: number
+    variants:
+      textStyle:
+        values:
+          screenTitle:
+            description: 화면에 크게 표시되는 주요 제목이나 타이틀에 사용합니다.
+          articleBody:
+            description: 게시물이나 콘텐츠 중심 섹션의 본문 텍스트에 사용합니다.
+          articleNote:
+            description: 주석, 참고 사항 및 상세 리스트 등 부가 정보에 사용하며, 일반 본문 텍스트에는 사용하지 않습니다.
+          t1StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t1StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t1StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t8StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t9StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t10StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
   definitions:
     textStyle=screenTitle:
       enabled:
@@ -27,6 +84,12 @@ data:
           fontSize: $font-size.t5
           lineHeight: $line-height.t6
           fontWeight: $font-weight.regular
+    textStyle=articleNote:
+      enabled:
+        root:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
     textStyle=t1Regular:
       enabled:
         root:
@@ -171,3 +234,147 @@ data:
           fontSize: $font-size.t10
           lineHeight: $line-height.t10
           fontWeight: $font-weight.bold
+    textStyle=t1StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t1-static
+          lineHeight: $line-height.t1-static
+          fontWeight: $font-weight.regular
+    textStyle=t1StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t1-static
+          lineHeight: $line-height.t1-static
+          fontWeight: $font-weight.medium
+    textStyle=t1StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t1-static
+          lineHeight: $line-height.t1-static
+          fontWeight: $font-weight.bold
+    textStyle=t2StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t2-static
+          lineHeight: $line-height.t2-static
+          fontWeight: $font-weight.regular
+    textStyle=t2StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t2-static
+          lineHeight: $line-height.t2-static
+          fontWeight: $font-weight.medium
+    textStyle=t2StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t2-static
+          lineHeight: $line-height.t2-static
+          fontWeight: $font-weight.bold
+    textStyle=t3StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t3-static
+          lineHeight: $line-height.t3-static
+          fontWeight: $font-weight.regular
+    textStyle=t3StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t3-static
+          lineHeight: $line-height.t3-static
+          fontWeight: $font-weight.medium
+    textStyle=t3StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t3-static
+          lineHeight: $line-height.t3-static
+          fontWeight: $font-weight.bold
+    textStyle=t4StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t4-static
+          lineHeight: $line-height.t4-static
+          fontWeight: $font-weight.regular
+    textStyle=t4StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t4-static
+          lineHeight: $line-height.t4-static
+          fontWeight: $font-weight.medium
+    textStyle=t4StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t4-static
+          lineHeight: $line-height.t4-static
+          fontWeight: $font-weight.bold
+    textStyle=t5StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t5-static
+          lineHeight: $line-height.t5-static
+          fontWeight: $font-weight.regular
+    textStyle=t5StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t5-static
+          lineHeight: $line-height.t5-static
+          fontWeight: $font-weight.medium
+    textStyle=t5StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t5-static
+          lineHeight: $line-height.t5-static
+          fontWeight: $font-weight.bold
+    textStyle=t6StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t6-static
+          lineHeight: $line-height.t6-static
+          fontWeight: $font-weight.regular
+    textStyle=t6StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t6-static
+          lineHeight: $line-height.t6-static
+          fontWeight: $font-weight.medium
+    textStyle=t6StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t6-static
+          lineHeight: $line-height.t6-static
+          fontWeight: $font-weight.bold
+    textStyle=t7StaticRegular:
+      enabled:
+        root:
+          fontSize: $font-size.t7-static
+          lineHeight: $line-height.t7-static
+          fontWeight: $font-weight.regular
+    textStyle=t7StaticMedium:
+      enabled:
+        root:
+          fontSize: $font-size.t7-static
+          lineHeight: $line-height.t7-static
+          fontWeight: $font-weight.medium
+    textStyle=t7StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t7-static
+          lineHeight: $line-height.t7-static
+          fontWeight: $font-weight.bold
+    textStyle=t8StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t8-static
+          lineHeight: $line-height.t8-static
+          fontWeight: $font-weight.bold
+    textStyle=t9StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t9-static
+          lineHeight: $line-height.t9-static
+          fontWeight: $font-weight.bold
+    textStyle=t10StaticBold:
+      enabled:
+        root:
+          fontSize: $font-size.t10-static
+          lineHeight: $line-height.t10-static
+          fontWeight: $font-weight.bold

package/font-size.yaml

@@ -36,32 +36,42 @@ data:
       values:
         default: 1.625rem # 26px ÷ 16
     $font-size.t1-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 11px
     $font-size.t2-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 12px
     $font-size.t3-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 13px
     $font-size.t4-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 14px
     $font-size.t5-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 16px
     $font-size.t6-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 18px
     $font-size.t7-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 20px
     $font-size.t8-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 22px
     $font-size.t9-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 24px
     $font-size.t10-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 26px

package/gradient.yaml

@@ -2,12 +2,14 @@ kind: Tokens
 metadata:
   id: gradient
   name: Gradient
-  lastUpdated: 25-08-22
+  lastUpdated: 26-01-14
 data:
   collection: color
   tokens:
     $gradient.fade-layer-floating:
-      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      description: |
+        스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+        @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
       values:
         theme-light:
           type: gradient
@@ -24,7 +26,9 @@ data:
             - color: "#000000"
               position: 1
     $gradient.fade-layer-default:
-      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      description: |
+        스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+        @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
       values:
         theme-light:
           type: gradient
@@ -82,30 +86,39 @@ data:
               position: 0.8
             - color: "#434242"
               position: 1
-    $gradient.shimmer-neutral:
-      description: Skeleton shimmer
+    $gradient.highlight-magic:
+      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.
       values:
         theme-light:
           type: gradient
           value:
-            - color: "#ffffff00"
-              position: 0
-            - color: "#ffffff66"
-              position: 0.46
-            - color: "#ffffff66"
-              position: 0.54
-            - color: "#ffffff00"
+            - color: "#ff6600"
+              position: 0.2
+            - color: "#d25aca"
               position: 1
         theme-dark:
           type: gradient
           value:
-            - color: "#ffffff00"
-              position: 0
-            - color: "#ffffff1a"
-              position: 0.46
-            - color: "#ffffff1a"
-              position: 0.54
-            - color: "#ffffff00"
+            - color: "#ff6600"
+              position: 0.2
+            - color: "#d25aca"
+              position: 1
+    $gradient.highlight-magic-pressed:
+      description: ""
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#e14f00"
+              position: 0.2
+            - color: "#ae58bf"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#ff9e65"
+              position: 0.2
+            - color: "#e89bee"
               position: 1
     $gradient.shimmer-magic:
       description: Skeleton AI shimmer
@@ -115,9 +128,9 @@ data:
           value:
             - color: "#fff9f500"
               position: 0
-            - color: "#fff9f58a"
+            - color: "#fff9f5cc"
               position: 0.46
-            - color: "#fff9f58a"
+            - color: "#fff9f5cc"
               position: 0.54
             - color: "#fff9f500"
               position: 1
@@ -132,37 +145,28 @@ data:
               position: 0.54
             - color: "#fff9f500"
               position: 1
-    $gradient.highlight-magic-pressed:
-      description: ""
-      values:
-        theme-light:
-          type: gradient
-          value:
-            - color: "#e14f00"
-              position: 0.2
-            - color: "#ae58bf"
-              position: 1
-        theme-dark:
-          type: gradient
-          value:
-            - color: "#ff9e65"
-              position: 0.2
-            - color: "#e89bee"
-              position: 1
-    $gradient.highlight-magic:
-      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.
+    $gradient.shimmer-neutral:
+      description: Skeleton shimmer
       values:
         theme-light:
           type: gradient
           value:
-            - color: "#ff6600"
-              position: 0.2
-            - color: "#d25aca"
+            - color: "#ffffff00"
+              position: 0
+            - color: "#ffffffab"
+              position: 0.46
+            - color: "#ffffffab"
+              position: 0.54
+            - color: "#ffffff00"
               position: 1
         theme-dark:
           type: gradient
           value:
-            - color: "#ff6600"
-              position: 0.2
-            - color: "#d25aca"
+            - color: "#ffffff00"
+              position: 0
+            - color: "#ffffff1a"
+              position: 0.46
+            - color: "#ffffff1a"
+              position: 0.54
+            - color: "#ffffff00"
               position: 1

package/line-height.yaml

@@ -36,32 +36,42 @@ data:
       values:
         default: 2.1875rem # 35px ÷ 16
     $line-height.t1-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 15px
     $line-height.t2-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 16px
     $line-height.t3-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 18px
     $line-height.t4-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 19px
     $line-height.t5-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 22px
     $line-height.t6-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 24px
     $line-height.t7-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 27px
     $line-height.t8-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 30px
     $line-height.t9-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 32px
     $line-height.t10-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 35px

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/shadow.yaml

@@ -2,7 +2,7 @@ kind: Tokens
 metadata:
   id: shadow
   name: Shadow
-  lastUpdated: 25-12-08
+  lastUpdated: 26-01-06
 data:
   collection: color
   tokens: