@seed-design/rootage-artifacts 2.9.0 → 3.0.0

package/__generated__/components/switchmark.d.ts

@@ -274,6 +274,12 @@ declare const artifact: {
                   "value": "$color.bg.brand-solid";
                 };
               };
+              "thumb": {
+                "color": {
+                  "type": "color";
+                  "value": "$color.fg.on-brand-solid";
+                };
+              };
             };
           },
         ];
@@ -291,7 +297,7 @@ declare const artifact: {
               "thumb": {
                 "color": {
                   "type": "color";
-                  "value": "$color.fg.neutral-inverted";
+                  "value": "$color.fg.on-neutral-solid";
                 };
               };
             };
@@ -305,7 +311,7 @@ declare const artifact: {
               "root": {
                 "color": {
                   "type": "color";
-                  "value": "$color.bg.neutral-inverted";
+                  "value": "$color.bg.neutral-solid";
                 };
               };
             };

package/__generated__/components/switchmark.json

@@ -273,6 +273,12 @@
                   "type": "color",
                   "value": "$color.bg.brand-solid"
                 }
+              },
+              "thumb": {
+                "color": {
+                  "type": "color",
+                  "value": "$color.fg.on-brand-solid"
+                }
               }
             }
           }
@@ -291,7 +297,7 @@
               "thumb": {
                 "color": {
                   "type": "color",
-                  "value": "$color.fg.neutral-inverted"
+                  "value": "$color.fg.on-neutral-solid"
                 }
               }
             }
@@ -305,7 +311,7 @@
               "root": {
                 "color": {
                   "type": "color",
-                  "value": "$color.bg.neutral-inverted"
+                  "value": "$color.bg.neutral-solid"
                 }
               }
             }

package/__generated__/components/toggle-button.d.ts

@@ -179,19 +179,19 @@ declare const artifact: {
               "label": {
                 "color": {
                   "type": "color";
-                  "value": "$color.palette.static-white";
+                  "value": "$color.fg.on-brand-solid";
                 };
               };
               "prefixIcon": {
                 "color": {
                   "type": "color";
-                  "value": "$color.palette.static-white";
+                  "value": "$color.fg.on-brand-solid";
                 };
               };
               "suffixIcon": {
                 "color": {
                   "type": "color";
-                  "value": "$color.palette.static-white";
+                  "value": "$color.fg.on-brand-solid";
                 };
               };
               "progressCircle": {
@@ -201,7 +201,7 @@ declare const artifact: {
                 };
                 "rangeColor": {
                   "type": "color";
-                  "value": "$color.palette.static-white";
+                  "value": "$color.fg.on-brand-solid";
                 };
               };
             };

package/__generated__/components/toggle-button.json

@@ -179,19 +179,19 @@
               "label": {
                 "color": {
                   "type": "color",
-                  "value": "$color.palette.static-white"
+                  "value": "$color.fg.on-brand-solid"
                 }
               },
               "prefixIcon": {
                 "color": {
                   "type": "color",
-                  "value": "$color.palette.static-white"
+                  "value": "$color.fg.on-brand-solid"
                 }
               },
               "suffixIcon": {
                 "color": {
                   "type": "color",
-                  "value": "$color.palette.static-white"
+                  "value": "$color.fg.on-brand-solid"
                 }
               },
               "progressCircle": {
@@ -201,7 +201,7 @@
                 },
                 "rangeColor": {
                   "type": "color",
-                  "value": "$color.palette.static-white"
+                  "value": "$color.fg.on-brand-solid"
                 }
               }
             }

package/__generated__/components/top-navigation.d.ts

@@ -152,6 +152,13 @@ declare const artifact: {
             ];
             "slots": {
               "root": {
+                "height": {
+                  "type": "dimension";
+                  "value": {
+                    "value": 56;
+                    "unit": "px";
+                  };
+                };
                 "paddingX": {
                   "type": "dimension";
                   "value": "$dimension.x1_5";
@@ -172,13 +179,6 @@ declare const artifact: {
             ];
             "slots": {
               "root": {
-                "height": {
-                  "type": "dimension";
-                  "value": {
-                    "value": 44;
-                    "unit": "px";
-                  };
-                };
                 "titleMinGap": {
                   "type": "dimension";
                   "value": "$dimension.x2";
@@ -198,15 +198,6 @@ declare const artifact: {
               "enabled",
             ];
             "slots": {
-              "root": {
-                "height": {
-                  "type": "dimension";
-                  "value": {
-                    "value": 56;
-                    "unit": "px";
-                  };
-                };
-              };
               "main": {
                 "paddingLeft": {
                   "type": "dimension";

package/__generated__/components/top-navigation.json

@@ -152,6 +152,13 @@
             ],
             "slots": {
               "root": {
+                "height": {
+                  "type": "dimension",
+                  "value": {
+                    "value": 56,
+                    "unit": "px"
+                  }
+                },
                 "paddingX": {
                   "type": "dimension",
                   "value": "$dimension.x1_5"
@@ -172,13 +179,6 @@
             ],
             "slots": {
               "root": {
-                "height": {
-                  "type": "dimension",
-                  "value": {
-                    "value": 44,
-                    "unit": "px"
-                  }
-                },
                 "titleMinGap": {
                   "type": "dimension",
                   "value": "$dimension.x2"
@@ -198,15 +198,6 @@
               "enabled"
             ],
             "slots": {
-              "root": {
-                "height": {
-                  "type": "dimension",
-                  "value": {
-                    "value": 56,
-                    "unit": "px"
-                  }
-                }
-              },
               "main": {
                 "paddingLeft": {
                   "type": "dimension",

package/__generated__/index.d.ts

@@ -1,6 +1,6 @@
 declare const artifact: {
   "name": "Rootage";
-  "version": "2.9.0";
+  "version": "3.0.0";
   "resources": readonly [
     {
       "path": "/collections.json";
@@ -95,9 +95,6 @@ declare const artifact: {
     {
       "path": "/components/contextual-floating-button.json";
     },
-    {
-      "path": "/components/control-chip.json";
-    },
     {
       "path": "/components/date-picker.json";
     },
@@ -152,9 +149,6 @@ declare const artifact: {
     {
       "path": "/components/image-frame.json";
     },
-    {
-      "path": "/components/inline-banner.json";
-    },
     {
       "path": "/components/input-button.json";
     },
@@ -203,6 +197,12 @@ declare const artifact: {
     {
       "path": "/components/pagination-page-item.json";
     },
+    {
+      "path": "/components/popover-close-button.json";
+    },
+    {
+      "path": "/components/popover.json";
+    },
     {
       "path": "/components/progress-circle.json";
     },

package/__generated__/index.json

@@ -1,6 +1,6 @@
 {
   "name": "Rootage",
-  "version": "2.9.0",
+  "version": "3.0.0",
   "resources": [
     {
       "path": "/collections.json"
@@ -95,9 +95,6 @@
     {
       "path": "/components/contextual-floating-button.json"
     },
-    {
-      "path": "/components/control-chip.json"
-    },
     {
       "path": "/components/date-picker.json"
     },
@@ -152,9 +149,6 @@
     {
       "path": "/components/image-frame.json"
     },
-    {
-      "path": "/components/inline-banner.json"
-    },
     {
       "path": "/components/input-button.json"
     },
@@ -203,6 +197,12 @@
     {
       "path": "/components/pagination-page-item.json"
     },
+    {
+      "path": "/components/popover-close-button.json"
+    },
+    {
+      "path": "/components/popover.json"
+    },
     {
       "path": "/components/progress-circle.json"
     },

package/color.yaml

@@ -422,7 +422,7 @@ data:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-1000
     $color.fg.neutral-inverted:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)
+      description: "@deprecated `$color.fg.on-neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 전경색입니다."
       values:
         theme-light: $color.palette.gray-00
         theme-dark: $color.palette.gray-100
@@ -436,6 +436,36 @@ data:
       values:
         theme-light: $color.palette.gray-700
         theme-dark: $color.palette.gray-700
+    $color.fg.on-brand-solid:
+      description: 브랜드 Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.static-white
+        theme-dark: $color.palette.static-white
+    $color.fg.on-critical-solid:
+      description: Critical Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.static-white
+        theme-dark: $color.palette.static-white
+    $color.fg.on-informative-solid:
+      description: Informative Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.static-white
+        theme-dark: $color.palette.static-white
+    $color.fg.on-neutral-solid:
+      description: Neutral Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.gray-00
+        theme-dark: $color.palette.gray-100
+    $color.fg.on-positive-solid:
+      description: Positive Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.static-white
+        theme-dark: $color.palette.static-white
+    $color.fg.on-warning-solid:
+      description: Warning Solid 배경 위의 전경 요소에 사용됩니다.
+      values:
+        theme-light: $color.palette.static-black-alpha-900
+        theme-dark: $color.palette.static-black-alpha-900
     $color.fg.placeholder:
       values:
         theme-light: $color.palette.gray-600
@@ -539,11 +569,6 @@ data:
       values:
         theme-light: $color.palette.gray-100
         theme-dark: $color.palette.gray-300
-    $color.bg.layer-fill:
-      description: "@deprecated @seed-design/css@3.0.0에서 새 이름 토큰으로 대체·제거될 예정입니다."
-      values:
-        theme-light: $color.palette.gray-100
-        theme-dark: $color.palette.gray-200
     $color.bg.layer-floating:
       description: 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다.
       values:
@@ -559,20 +584,30 @@ data:
         theme-light: "#f9f2ee"
         theme-dark: "#201f1f"
     $color.bg.neutral-inverted:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)
+      description: "@deprecated `$color.bg.neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 배경색입니다."
       values:
         theme-light: $color.palette.gray-900
         theme-dark: $color.palette.gray-1000
     $color.bg.neutral-inverted-pressed:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)
+      description: "@deprecated `$color.bg.neutral-solid-pressed`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)"
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800
+    $color.bg.neutral-muted:
+      description: "`$color.bg.layer-default` 위에서 영역이나 섹션을 구분하는 표면 색상입니다. (muted)"
+      values:
+        theme-light: $color.palette.gray-100
+        theme-dark: $color.palette.gray-200
     $color.bg.neutral-solid:
       description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)
       values:
-        theme-light: $color.palette.gray-1000
-        theme-dark: $color.palette.gray-300
+        theme-light: $color.palette.gray-900
+        theme-dark: $color.palette.gray-1000
+    $color.bg.neutral-solid-pressed:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-pressed)
+      values:
+        theme-light: $color.palette.gray-800
+        theme-dark: $color.palette.gray-800
     $color.bg.neutral-solid-muted:
       description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted)
       excludeFromExchange: true
@@ -585,6 +620,11 @@ data:
       values:
         theme-light: $color.palette.gray-900
         theme-dark: $color.palette.gray-500
+    $color.bg.neutral-subtle:
+      description: 표면과 같은 색상입니다. 회색 표면 위에서 주변과 구분되는 영역에 사용됩니다. (subtle)
+      values:
+        theme-light: $color.palette.gray-00
+        theme-dark: $color.palette.gray-100
     $color.bg.neutral-weak:
       description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
       values:

package/components/action-button.yaml

@@ -123,16 +123,16 @@ data:
         root:
           color: $color.bg.brand-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
         icon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
         prefixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
         suffixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
         progressCircle:
           trackColor: $color.palette.static-white-alpha-300
-          rangeColor: $color.palette.static-white
+          rangeColor: $color.fg.on-brand-solid
       pressed:
         root:
           color: $color.bg.brand-solid-pressed
@@ -153,21 +153,21 @@ data:
     variant=neutralSolid:
       enabled:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         label:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         icon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         prefixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         suffixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         progressCircle:
           trackColor: $color.palette.static-white-alpha-300
-          rangeColor: $color.palette.static-white
+          rangeColor: $color.fg.on-neutral-solid
       pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
       disabled:
         root:
           color: $color.bg.disabled
@@ -181,7 +181,7 @@ data:
           color: $color.fg.disabled
       loading:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
     variant=neutralWeak:
       enabled:
         root:
@@ -219,16 +219,16 @@ data:
         root:
           color: $color.bg.critical-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         icon:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         prefixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         suffixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         progressCircle:
           trackColor: $color.palette.static-white-alpha-300
-          rangeColor: $color.palette.static-white
+          rangeColor: $color.fg.on-critical-solid
       pressed:
         root:
           color: $color.bg.critical-solid-pressed

package/components/badge.yaml

@@ -8,15 +8,14 @@ data:
     slots:
       root:
         properties:
-          maxWidth:
-            type: dimension
-            description: 10글자 이상의 텍스트를 말줄임 처리하기 위해 설정된 최대 너비입니다.
           minHeight:
             type: dimension
           paddingX:
             type: dimension
           paddingY:
             type: dimension
+          gap:
+            type: dimension
           cornerRadius:
             type: dimension
           strokeWidth:
@@ -25,6 +24,10 @@ data:
             type: color
           color:
             type: color
+      prefix:
+        properties:
+          size:
+            type: dimension
       label:
         properties:
           fontSize:
@@ -35,6 +38,10 @@ data:
             type: number
           color:
             type: color
+      action:
+        properties:
+          size:
+            type: dimension
     variants:
       variant:
         values:
@@ -60,22 +67,30 @@ data:
     size=large:
       enabled:
         root:
-          maxWidth: 6.75rem # 108px ÷ 16
           minHeight: $dimension.x6
           paddingX: $dimension.x2
           paddingY: $dimension.x1
           cornerRadius: $radius.r1_5
+          gap: $dimension.x0_5
+        prefix:
+          size: $dimension.x3_5
+        action:
+          size: $dimension.x3_5
         label:
           fontSize: $font-size.t2
           lineHeight: $line-height.t2
     size=medium:
       enabled:
         root:
-          maxWidth: 7.5rem # 120px ÷ 16
           minHeight: $dimension.x5
           paddingX: $dimension.x1_5
           paddingY: $dimension.x0_5
           cornerRadius: $radius.r1
+          gap: $dimension.x0_5
+        prefix:
+          size: $dimension.x3
+        action:
+          size: $dimension.x3
         label:
           fontSize: $font-size.t1
           lineHeight: $line-height.t1
@@ -106,7 +121,7 @@ data:
         root:
           color: $color.palette.gray-800
         label:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
     tone=neutral, variant=outline:
       enabled:
         root:
@@ -125,7 +140,7 @@ data:
         root:
           color: $color.bg.brand-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
     tone=brand, variant=outline:
       enabled:
         root:
@@ -144,7 +159,7 @@ data:
         root:
           color: $color.bg.informative-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
     tone=informative, variant=outline:
       enabled:
         root:
@@ -163,7 +178,7 @@ data:
         root:
           color: $color.bg.positive-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
     tone=positive, variant=outline:
       enabled:
         root:
@@ -182,7 +197,7 @@ data:
         root:
           color: $color.bg.warning-solid
         label:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
     tone=warning, variant=outline:
       enabled:
         root:
@@ -201,7 +216,7 @@ data:
         root:
           color: $color.bg.critical-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
     tone=critical, variant=outline:
       enabled:
         root:

package/components/checkmark.yaml

@@ -79,19 +79,19 @@ data:
         root:
           color: $color.bg.brand-solid
         icon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
       pressed,selected:
         root:
           color: $color.bg.brand-solid-pressed
     variant=square,tone=neutral:
       enabled,selected:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         icon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       pressed,selected:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
 
     variant=ghost:
       enabled:

package/components/chip.yaml

@@ -122,18 +122,18 @@ data:
           opacity: 0.5
       selected:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         label:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         prefixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         suffixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         icon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       selected, pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
       selected, disabled:
         root:
           opacity: 0.5
@@ -160,18 +160,18 @@ data:
           opacity: 0.5
       selected:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         label:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         prefixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         suffixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         icon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       selected, pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
       selected, disabled:
         root:
           opacity: 0.5