@seed-design/rootage-artifacts 2.10.0 → 3.0.0

package/components/date-picker.yaml

@@ -98,16 +98,18 @@ data:
         properties:
           height:
             type: dimension
-      wheelItem:
+      wheelPopover:
         properties:
-          paddingX:
-            type: dimension
-          fontSize:
+          width:
             type: dimension
-          lineHeight:
+          cornerRadius:
             type: dimension
-          fontWeight:
-            type: number
+          color:
+            type: color
+          shadow:
+            type: shadow
+      wheelItem:
+        properties:
           color:
             type: color
   definitions:
@@ -160,11 +162,12 @@ data:
         wheelContainer:
           # 44px × 7개 항목(308px)을 중앙 정렬하고 위아래 14px 여백을 둡니다.
           height: 336px
+        wheelPopover:
+          width: 240px
+          cornerRadius: $radius.r3
+          color: $color.bg.layer-floating
+          shadow: $shadow.s3
         wheelItem:
-          paddingX: $dimension.x4
-          fontSize: $font-size.t10-static
-          lineHeight: $line-height.t10-static
-          fontWeight: $font-weight.medium
           color: $color.fg.disabled
       pressed:
         dateVisual:
@@ -174,9 +177,9 @@ data:
           color: $color.bg.neutral-weak
       selected:
         dateVisual:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         dateContent:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         wheelItem:
           color: $color.fg.neutral
       readOnly:

package/components/dialog-close-button.yaml

@@ -27,10 +27,6 @@ data:
             type: color
           size:
             type: dimension
-          colorDuration:
-            type: duration
-          colorTimingFunction:
-            type: cubicBezier
   definitions:
     base:
       enabled:
@@ -43,8 +39,6 @@ data:
         icon:
           color: $color.fg.neutral-subtle
           size: 22px
-          colorDuration: $duration.color-transition
-          colorTimingFunction: $timing-function.easing
       pressed:
         root:
           color: $color.bg.transparent-pressed

package/components/extended-fab.yaml

@@ -62,14 +62,14 @@ 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
         prefixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
     variant=layerFloating:
       enabled:
         root:

package/components/floating-action-button.yaml

@@ -74,7 +74,7 @@ data:
           layoutDuration: $duration.d4
           layoutTimingFunction: $timing-function.easing
         icon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
           sizeDuration: $duration.d4
           sizeTimingFunction: $timing-function.easing
       pressed:
@@ -91,7 +91,7 @@ data:
         icon:
           size: $dimension.x4
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
           fontWeight: $font-weight.bold

package/components/help-bubble.yaml

@@ -96,7 +96,7 @@ data:
     base:
       enabled:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
           cornerRadius: $radius.r3
           paddingX: $dimension.x3
           paddingY: $dimension.x2_5
@@ -112,7 +112,7 @@ data:
           exitTimingFunction: $timing-function.easing
           overflowPadding: $dimension.x4
         arrow:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
           width: 12px
           height: 8px
           cornerRadius: 2px
@@ -121,17 +121,17 @@ data:
         body:
           gap: $dimension.x0_5
         title:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
           fontSize: $font-size.t3
           fontWeight: $font-weight.bold
           lineHeight: $line-height.t3
         description:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
           fontSize: $font-size.t3
           fontWeight: $font-weight.regular
           lineHeight: $line-height.t3
         closeButton:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
           size: $dimension.x3_5
           targetSize: 38px
           marginTop: $dimension.x0_5

package/components/notification-badge.yaml

@@ -53,7 +53,7 @@ data:
         root:
           color: $color.bg.brand-solid
         label:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
     size=large:
       enabled:
         root:

package/components/page-banner-close-button.yaml

@@ -63,7 +63,7 @@ data:
     tone=neutral, variant=solid:
       enabled:
         icon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
     tone=positive, variant=weak:
       enabled:
         icon:

package/components/page-banner.yaml

@@ -141,20 +141,20 @@ data:
     tone=neutral, variant=solid:
       enabled:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         prefixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         title:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         description:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         button:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
         suffixIcon:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
     tone=positive, variant=weak:
       enabled:
         root:
@@ -177,15 +177,15 @@ data:
         root:
           color: $color.bg.positive-solid
         prefixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
         title:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
         description:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
         button:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
         suffixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-positive-solid
       pressed:
         root:
           color: $color.bg.positive-solid-pressed
@@ -211,15 +211,15 @@ data:
         root:
           color: $color.bg.informative-solid
         prefixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
         title:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
         description:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
         button:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
         suffixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-informative-solid
       pressed:
         root:
           color: $color.bg.informative-solid-pressed
@@ -245,15 +245,15 @@ data:
         root:
           color: $color.bg.warning-solid
         prefixIcon:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
         title:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
         description:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
         button:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
         suffixIcon:
-          color: $color.palette.static-black-alpha-900
+          color: $color.fg.on-warning-solid
       pressed:
         root:
           color: $color.bg.warning-solid-pressed
@@ -279,15 +279,15 @@ data:
         root:
           color: $color.bg.critical-solid
         prefixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         title:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         description:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         button:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
         suffixIcon:
-          color: $color.palette.static-white
+          color: $color.fg.on-critical-solid
       pressed:
         root:
           color: $color.bg.critical-solid-pressed

package/components/pagination-page-item.yaml

@@ -50,12 +50,12 @@ data:
           scale: $scale.s97
       selected:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         label:
-          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
       disabled:
         root:
           color: $color.bg.transparent

package/components/popover-close-button.yaml

@@ -0,0 +1,45 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: popover-close-button
+  name: Popover Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          cornerRadius: $radius.r3
+          size: 52px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          color: $color.fg.neutral-subtle
+          size: 22px
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          scaleScope: self

package/components/popover.yaml

@@ -0,0 +1,162 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: popover
+  name: Popover
+data:
+  schema:
+    slots:
+      content:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          shadow:
+            type: shadow
+          minWidth:
+            type: dimension
+            description: viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다.
+          maxWidth:
+            type: dimension
+            description: viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다.
+          maxHeight:
+            type: dimension
+            description: viewport가 이보다 작으면 overflowPadding과 safe-area를 뺀 가용 높이로 축소됩니다.
+          gutter:
+            type: dimension
+            description: 트리거와 popover 사이의 간격을 정의합니다.
+          overflowPadding:
+            type: dimension
+            description: popover와 뷰포트 경계 사이의 최소 간격을 정의합니다. 위아래에 safe-area가 있으면 그 안쪽으로 배치됩니다.
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+          closeButtonGap:
+            type: dimension
+            description: closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다.
+      body:
+        properties:
+          paddingX:
+            type: dimension
+          paddingBottom:
+            type: dimension
+            description: body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다.
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다.
+          strokeDuration:
+            type: duration
+          strokeTimingFunction:
+            type: cubicBezier
+      footer:
+        properties:
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        content:
+          color: $color.bg.layer-floating
+          cornerRadius: $radius.r5
+          shadow: $shadow.s3
+          minWidth: 320px
+          maxWidth: 480px
+          maxHeight: 600px
+          gutter: $dimension.x2
+          overflowPadding: $dimension.x4
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          enterScale: 0.95
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitScale: 0.95
+          exitOpacity: 0
+        header:
+          gap: $dimension.x1_5
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+          closeButtonGap: $dimension.x1_5
+        body:
+          paddingX: $dimension.x6
+          paddingBottom: $dimension.x12
+          strokeDuration: $duration.color-transition
+          strokeTimingFunction: $timing-function.easing
+        footer:
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x4
+          paddingBottom: $dimension.x6
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t7
+          lineHeight: $line-height.t7
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+        closeButton:
+          fromTop: 27px
+          fromRight: 24px
+      scrolled:
+        body:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-muted

package/components/radiomark.yaml

@@ -61,7 +61,7 @@ data:
         root:
           color: $color.bg.brand-solid
         icon:
-          color: $color.palette.static-white
+          color: $color.fg.on-brand-solid
       enabled,selected,pressed:
         root:
           color: $color.bg.brand-solid-pressed
@@ -78,12 +78,12 @@ data:
     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
       enabled,selected,pressed:
         root:
-          color: $color.bg.neutral-inverted-pressed
+          color: $color.bg.neutral-solid-pressed
       disabled:
         root:
           color: $color.palette.gray-300

package/components/side-panel-close-button.yaml

@@ -27,10 +27,6 @@ data:
             type: color
           size:
             type: dimension
-          colorDuration:
-            type: duration
-          colorTimingFunction:
-            type: cubicBezier
   definitions:
     base:
       enabled:
@@ -43,8 +39,6 @@ data:
         icon:
           color: $color.fg.neutral-subtle
           size: 22px
-          colorDuration: $duration.color-transition
-          colorTimingFunction: $timing-function.easing
       pressed:
         root:
           color: $color.bg.transparent-pressed

package/components/slider-thumb.yaml

@@ -30,7 +30,7 @@ data:
         root:
           size: $dimension.x5
           cornerRadius: $radius.full
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
 
           scaleDuration: $duration.d3
           scaleTimingFunction: $timing-function.easing

package/components/slider-tick.yaml

@@ -16,7 +16,7 @@ data:
     base:
       enabled:
         root:
-          color: $color.fg.neutral-inverted # fg 토큰인데 적절할까?      
+          color: $color.fg.on-neutral-solid
     weight=thin:
       enabled:
         root:

package/components/slider.yaml

@@ -127,9 +127,9 @@ data:
         thumb:
           size: $dimension.x5
           cornerRadius: $radius.full
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
         valueIndicatorRoot:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
           cornerRadius: $radius.r1_5
           paddingX: $dimension.x2
           paddingY: $dimension.x1
@@ -145,13 +145,13 @@ data:
           translateDuration: $duration.d3
           translateTimingFunction: $timing-function.easing
         valueIndicatorArrow:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
           width: $dimension.x2
           height: $dimension.x1_5
           cornerRadius: $radius.r0_5
           gutter: $dimension.x0_5
         valueIndicatorLabel:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
           fontSize: $font-size.t3
           lineHeight: $line-height.t3
           fontWeight: $font-weight.medium

package/components/snackbar.yaml

@@ -97,7 +97,7 @@ data:
           offsetDuration: $duration.d4
           offsetTimingFunction: $timing-function.easing
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
           cornerRadius: $radius.r2
           minHeight: 44px
           maxWidth: 464px
@@ -115,7 +115,7 @@ data:
           paddingX: $dimension.x1_5
           gap: $dimension.x2_5
         message:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
           fontSize: $font-size.t4
           lineHeight: $line-height.t4
           fontWeight: $font-weight.regular

package/components/switchmark.yaml

@@ -104,13 +104,15 @@ data:
       enabled,selected:
         root:
           color: $color.bg.brand-solid
+        thumb:
+          color: $color.fg.on-brand-solid
     tone=neutral:
       enabled:
         thumb:
-          color: $color.fg.neutral-inverted
+          color: $color.fg.on-neutral-solid
       enabled,selected:
         root:
-          color: $color.bg.neutral-inverted
+          color: $color.bg.neutral-solid
       disabled:
         thumb:
           color: $color.palette.static-black-alpha-700

package/components/toggle-button.yaml

@@ -82,14 +82,14 @@ data:
         root:
           color: $color.bg.brand-solid
         label:
-          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

package/package.json

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