@seed-design/rootage-artifacts 0.0.4 → 0.0.6

package/color.yaml

@@ -2,6 +2,7 @@ kind: Tokens
 metadata:
   id: color
   name: Color
+  lastUpdated: 25-08-22
 data:
   collection: color
   tokens:
@@ -381,6 +382,10 @@ data:
       values:
         theme-light: "#2c2512"
         theme-dark: "#f7f0cd"
+    $color.fg.neutral:
+      values:
+        theme-light: $color.palette.gray-1000
+        theme-dark: $color.palette.gray-1000
     $color.fg.brand:
       values:
         theme-light: $color.palette.carrot-600
@@ -389,26 +394,30 @@ data:
       values:
         theme-light: $color.palette.red-700
         theme-dark: $color.palette.red-700
-    $color.fg.disabled:
+    $color.fg.positive:
       values:
-        theme-light: $color.palette.gray-500
-        theme-dark: $color.palette.gray-500
+        theme-light: $color.palette.green-700
+        theme-dark: $color.palette.green-700
+    $color.fg.warning:
+      values:
+        theme-light: $color.palette.yellow-700
+        theme-dark: $color.palette.yellow-700
     $color.fg.informative:
       values:
         theme-light: $color.palette.blue-700
         theme-dark: $color.palette.blue-700
-    $color.fg.neutral:
-      values:
-        theme-light: $color.palette.gray-1000
-        theme-dark: $color.palette.gray-1000
     $color.fg.placeholder:
       values:
         theme-light: $color.palette.gray-600
         theme-dark: $color.palette.gray-600
-    $color.fg.positive:
+    $color.fg.disabled:
       values:
-        theme-light: $color.palette.green-700
-        theme-dark: $color.palette.green-700
+        theme-light: $color.palette.gray-500
+        theme-dark: $color.palette.gray-500
+    $color.fg.brand-contrast:
+      values:
+        theme-light: $color.palette.carrot-700
+        theme-dark: $color.palette.carrot-700
     $color.fg.critical-contrast:
       values:
         theme-light: $color.palette.red-900
@@ -417,10 +426,6 @@ data:
       values:
         theme-light: $color.palette.blue-900
         theme-dark: $color.palette.blue-900
-    $color.fg.neutral-inverted:
-      values:
-        theme-light: $color.palette.gray-00
-        theme-dark: $color.palette.gray-100
     $color.fg.neutral-muted:
       values:
         theme-light: $color.palette.gray-800
@@ -429,6 +434,10 @@ data:
       values:
         theme-light: $color.palette.gray-700
         theme-dark: $color.palette.gray-700
+    $color.fg.neutral-inverted:
+      values:
+        theme-light: $color.palette.gray-00
+        theme-dark: $color.palette.gray-100
     $color.fg.positive-contrast:
       values:
         theme-light: $color.palette.green-900
@@ -437,14 +446,18 @@ data:
       values:
         theme-light: $color.palette.yellow-900
         theme-dark: $color.palette.yellow-900
+    $color.bg.overlay:
+      values:
+        theme-light: $color.palette.static-black-alpha-700
+        theme-dark: $color.palette.static-black-alpha-700
     $color.bg.disabled:
       values:
         theme-light: $color.palette.gray-200
         theme-dark: $color.palette.gray-300
-    $color.bg.overlay:
+    $color.bg.brand-weak:
       values:
-        theme-light: $color.palette.static-black-alpha-700
-        theme-dark: $color.palette.static-black-alpha-700
+        theme-light: $color.palette.carrot-100
+        theme-dark: $color.palette.carrot-100
     $color.bg.brand-solid:
       values:
         theme-light: $color.palette.carrot-600
@@ -453,14 +466,18 @@ data:
       values:
         theme-light: $color.palette.carrot-700
         theme-dark: $color.palette.carrot-800
-    $color.bg.critical-solid:
+    $color.bg.brand-weak-pressed:
       values:
-        theme-light: $color.palette.red-700
-        theme-dark: $color.palette.red-600
+        theme-light: $color.palette.carrot-200
+        theme-dark: $color.palette.carrot-200
     $color.bg.critical-weak:
       values:
         theme-light: $color.palette.red-100
         theme-dark: $color.palette.red-100
+    $color.bg.critical-solid:
+      values:
+        theme-light: $color.palette.red-700
+        theme-dark: $color.palette.red-600
     $color.bg.critical-solid-pressed:
       values:
         theme-light: $color.palette.red-800
@@ -469,14 +486,14 @@ data:
       values:
         theme-light: $color.palette.red-200
         theme-dark: $color.palette.red-200
-    $color.bg.informative-solid:
-      values:
-        theme-light: $color.palette.blue-700
-        theme-dark: $color.palette.blue-600
     $color.bg.informative-weak:
       values:
         theme-light: $color.palette.blue-100
         theme-dark: $color.palette.blue-100
+    $color.bg.informative-solid:
+      values:
+        theme-light: $color.palette.blue-700
+        theme-dark: $color.palette.blue-600
     $color.bg.informative-solid-pressed:
       values:
         theme-light: $color.palette.blue-800
@@ -513,6 +530,10 @@ data:
       values:
         theme-light: "#f9f2ee"
         theme-dark: "#201f1f"
+    $color.bg.neutral-weak:
+      values:
+        theme-light: $color.palette.gray-200
+        theme-dark: $color.palette.gray-300
     $color.bg.neutral-inverted:
       values:
         theme-light: $color.palette.gray-900
@@ -521,10 +542,6 @@ data:
       values:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-300
-    $color.bg.neutral-weak:
-      values:
-        theme-light: $color.palette.gray-200
-        theme-dark: $color.palette.gray-300
     $color.bg.neutral-inverted-pressed:
       values:
         theme-light: $color.palette.gray-800
@@ -545,42 +562,58 @@ data:
       values:
         theme-light: $color.palette.static-black-alpha-500
         theme-dark: $color.palette.static-black-alpha-500
-    $color.bg.positive-solid:
-      values:
-        theme-light: $color.palette.green-700
-        theme-dark: $color.palette.green-500
     $color.bg.positive-weak:
       values:
         theme-light: $color.palette.green-100
         theme-dark: $color.palette.green-100
+    $color.bg.positive-solid:
+      values:
+        theme-light: $color.palette.green-700
+        theme-dark: $color.palette.green-500
     $color.bg.positive-solid-pressed:
       values:
         theme-light: $color.palette.green-800
-        theme-dark: $color.palette.green-500
+        theme-dark: $color.palette.green-600
     $color.bg.positive-weak-pressed:
       values:
         theme-light: $color.palette.green-200
         theme-dark: $color.palette.green-200
+    $color.bg.warning-weak:
+      values:
+        theme-light: $color.palette.yellow-100
+        theme-dark: $color.palette.yellow-100
     $color.bg.warning-solid:
       values:
         theme-light: $color.palette.yellow-300
         theme-dark: $color.palette.yellow-600
-    $color.bg.warning-weak:
+    $color.bg.warning-solid-pressed:
       values:
-        theme-light: $color.palette.yellow-100
-        theme-dark: $color.palette.yellow-100
+        theme-light: $color.palette.yellow-400
+        theme-dark: $color.palette.yellow-700
     $color.bg.warning-weak-pressed:
       values:
         theme-light: $color.palette.yellow-200
         theme-dark: $color.palette.yellow-200
+    $color.stroke.neutral:
+      values:
+        theme-light: $color.palette.static-black-alpha-300
+        theme-dark: $color.palette.static-white-alpha-100
     $color.stroke.brand:
       values:
         theme-light: $color.palette.carrot-300
         theme-dark: $color.palette.carrot-300
-    $color.stroke.control:
+    $color.stroke.positive:
       values:
-        theme-light: $color.palette.gray-400
-        theme-dark: $color.palette.gray-400
+        theme-light: $color.palette.green-300
+        theme-dark: $color.palette.green-300
+    $color.stroke.informative:
+      values:
+        theme-light: $color.palette.blue-300
+        theme-dark: $color.palette.blue-300
+    $color.stroke.warning:
+      values:
+        theme-light: $color.palette.yellow-300
+        theme-dark: $color.palette.yellow-300
     $color.stroke.critical:
       values:
         theme-light: $color.palette.red-300
@@ -589,18 +622,10 @@ data:
       values:
         theme-light: $color.palette.gray-400
         theme-dark: $color.palette.gray-400
-    $color.stroke.informative:
-      values:
-        theme-light: $color.palette.blue-300
-        theme-dark: $color.palette.blue-300
-    $color.stroke.neutral:
-      values:
-        theme-light: $color.palette.static-black-alpha-300
-        theme-dark: $color.palette.static-white-alpha-100
-    $color.stroke.positive:
+    $color.stroke.control:
       values:
-        theme-light: $color.palette.green-300
-        theme-dark: $color.palette.green-300
+        theme-light: $color.palette.gray-400
+        theme-dark: $color.palette.gray-400
     $color.stroke.field-focused:
       values:
         theme-light: $color.palette.gray-800
@@ -613,51 +638,51 @@ data:
       values:
         theme-light: $color.palette.static-black-alpha-200
         theme-dark: $color.palette.static-white-alpha-50
-    $color.manner-temp.l1.bg:
-      values:
-        theme-light: "#eff0f1"
-        theme-dark: "#222226"
     $color.manner-temp.l1.text:
       values:
         theme-light: "#62666a"
         theme-dark: "#b1b5b9"
-    $color.manner-temp.l2.bg:
-      values:
-        theme-light: "#e7f2fc"
-        theme-dark: "#16212b"
     $color.manner-temp.l2.text:
       values:
         theme-light: "#2592f7"
         theme-dark: "#7cbaf4"
-    $color.manner-temp.l3.bg:
-      values:
-        theme-light: "#e3f6fc"
-        theme-dark: "#12262c"
     $color.manner-temp.l3.text:
       values:
         theme-light: "#0099c8"
         theme-dark: "#47c3eb"
-    $color.manner-temp.l4.bg:
-      values:
-        theme-light: "#ebf9f4"
-        theme-dark: "#162822"
     $color.manner-temp.l4.text:
       values:
         theme-light: "#03a07e"
         theme-dark: "#33cc94"
-    $color.manner-temp.l5.bg:
+    $color.manner-temp.l4.bg:
       values:
-        theme-light: "#fff5e5"
-        theme-dark: "#2e2312"
+        theme-light: "#ebf9f4"
+        theme-dark: "#162822"
     $color.manner-temp.l5.text:
       values:
         theme-light: "#d28500"
         theme-dark: "#ffa100"
-    $color.manner-temp.l6.bg:
-      values:
-        theme-light: "#fff0e5"
-        theme-dark: "#2e1d12"
     $color.manner-temp.l6.text:
       values:
         theme-light: "#f06000"
         theme-dark: "#ff9147"
+    $color.manner-temp.l1.bg:
+      values:
+        theme-light: "#eff0f1"
+        theme-dark: "#222226"
+    $color.manner-temp.l2.bg:
+      values:
+        theme-light: "#e7f2fc"
+        theme-dark: "#16212b"
+    $color.manner-temp.l3.bg:
+      values:
+        theme-light: "#e3f6fc"
+        theme-dark: "#12262c"
+    $color.manner-temp.l5.bg:
+      values:
+        theme-light: "#fff5e5"
+        theme-dark: "#2e2312"
+    $color.manner-temp.l6.bg:
+      values:
+        theme-light: "#fff0e5"
+        theme-dark: "#2e1d12"

package/components/badge.yaml

@@ -8,6 +8,8 @@ data:
     slots:
       root:
         properties:
+          maxWidth:
+            type: dimension
           minHeight:
             type: dimension
           paddingX:
@@ -36,6 +38,7 @@ data:
     size=large:
       enabled:
         root:
+          maxWidth: 6.75rem # 108px ÷ 16
           minHeight: $dimension.x6
           paddingX: $dimension.x2
           paddingY: $dimension.x1
@@ -46,6 +49,7 @@ data:
     size=medium:
       enabled:
         root:
+          maxWidth: 7.5rem # 120px ÷ 16
           minHeight: $dimension.x5
           paddingX: $dimension.x1_5
           paddingY: $dimension.x0_5
@@ -53,6 +57,7 @@ data:
         label:
           fontSize: $font-size.t1
           lineHeight: $line-height.t1
+
     variant=weak:
       enabled:
         label:
@@ -67,6 +72,7 @@ data:
           strokeWidth: 1px
         label:
           fontWeight: $font-weight.bold
+
     tone=neutral, variant=weak:
       enabled:
         root:
@@ -85,12 +91,13 @@ data:
           strokeColor: $color.stroke.neutral
         label:
           color: $color.fg.neutral-muted
+
     tone=brand, variant=weak:
       enabled:
         root:
-          color: $color.palette.carrot-100
+          color: $color.bg.brand-weak
         label:
-          color: $color.palette.carrot-900
+          color: $color.fg.brand-contrast
     tone=brand, variant=solid:
       enabled:
         root:
@@ -103,6 +110,7 @@ data:
           strokeColor: $color.stroke.brand
         label:
           color: $color.fg.brand
+
     tone=informative, variant=weak:
       enabled:
         root:
@@ -121,6 +129,7 @@ data:
           strokeColor: $color.stroke.informative
         label:
           color: $color.fg.informative
+
     tone=positive, variant=weak:
       enabled:
         root:
@@ -139,6 +148,26 @@ data:
           strokeColor: $color.stroke.positive
         label:
           color: $color.fg.positive
+
+    tone=warning, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.warning-weak
+        label:
+          color: $color.fg.warning-contrast
+    tone=warning, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.warning-solid
+        label:
+          color: $color.fg.neutral
+    tone=warning, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.warning
+        label:
+          color: $color.fg.warning
+
     tone=critical, variant=weak:
       enabled:
         root:

package/components/inline-banner.yaml

@@ -3,6 +3,7 @@ kind: ComponentSpec
 metadata:
   id: inline-banner
   name: Inline Banner
+  deprecated: Use Page Banner instead.
 data:
   schema:
     slots:

package/components/page-banner.yaml

@@ -0,0 +1,273 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: page-banner
+  name: Page Banner
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          minHeight:
+            type: dimension
+          color:
+            type: color
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          marginRight:
+            type: dimension
+          color:
+            type: color
+      textContent:
+        properties:
+          gap:
+            type: dimension
+      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
+      button:
+        properties:
+          targetHeight:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          marginLeft:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+          marginLeft:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x2_5
+          minHeight: $dimension.x10
+        prefixIcon:
+          size: $dimension.x4
+          marginRight: $dimension.x2
+        textContent:
+          gap: $dimension.x1_5
+        title:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+        description:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+        button:
+          targetHeight: $dimension.x10
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.bold
+        suffixIcon:
+          size: $dimension.x4
+          targetSize: $dimension.x10
+          marginLeft: $dimension.x2
+    tone=neutral, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        button:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    tone=neutral, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+        title:
+          color: $color.fg.neutral-inverted
+        description:
+          color: $color.fg.neutral-inverted
+        button:
+          color: $color.fg.neutral-inverted
+        suffixIcon:
+          color: $color.fg.neutral-inverted
+      pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+    tone=positive, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.positive-weak
+        prefixIcon:
+          color: $color.fg.positive-contrast
+        title:
+          color: $color.fg.positive-contrast
+        description:
+          color: $color.fg.positive-contrast
+        button:
+          color: $color.fg.positive-contrast
+        suffixIcon:
+          color: $color.fg.positive-contrast
+      pressed:
+        root:
+          color: $color.bg.positive-weak-pressed
+    tone=positive, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.positive-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.positive-solid-pressed
+    tone=informative, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.informative-weak
+        prefixIcon:
+          color: $color.fg.informative-contrast
+        title:
+          color: $color.fg.informative-contrast
+        description:
+          color: $color.fg.informative-contrast
+        button:
+          color: $color.fg.informative-contrast
+        suffixIcon:
+          color: $color.fg.informative-contrast
+      pressed:
+        root:
+          color: $color.bg.informative-weak-pressed
+    tone=informative, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.informative-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.informative-solid-pressed
+    tone=warning, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.warning-weak
+        prefixIcon:
+          color: $color.fg.warning-contrast
+        title:
+          color: $color.fg.warning-contrast
+        description:
+          color: $color.fg.warning-contrast
+        button:
+          color: $color.fg.warning-contrast
+        suffixIcon:
+          color: $color.fg.warning-contrast
+      pressed:
+        root:
+          color: $color.bg.warning-weak-pressed
+    tone=warning, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.warning-solid
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        button:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.warning-solid-pressed
+    tone=critical, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.critical-weak
+        prefixIcon:
+          color: $color.fg.critical-contrast
+        title:
+          color: $color.fg.critical-contrast
+        description:
+          color: $color.fg.critical-contrast
+        button:
+          color: $color.fg.critical-contrast
+        suffixIcon:
+          color: $color.fg.critical-contrast
+      pressed:
+        root:
+          color: $color.bg.critical-weak-pressed
+    tone=critical, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.critical-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.critical-solid-pressed

package/components/snackbar.yaml

@@ -24,6 +24,8 @@ data:
             type: dimension
           minHeight:
             type: dimension
+          maxWidth:
+            type: dimension
           paddingX:
             type: dimension
           paddingY:
@@ -89,6 +91,7 @@ data:
           color: $color.bg.neutral-solid
           cornerRadius: $radius.r2
           minHeight: 44px
+          maxWidth: 560px
           paddingX: $dimension.x4
           paddingY: $dimension.x2_5
           gap: $dimension.x2

package/font-size.yaml

@@ -35,12 +35,33 @@ data:
     $font-size.t10:
       values:
         default: 1.625rem # 26px ÷ 16
+    $font-size.t1-static:
+      values:
+        default: 11px
     $font-size.t2-static:
       values:
         default: 12px
+    $font-size.t3-static:
+      values:
+        default: 13px
+    $font-size.t4-static:
+      values:
+        default: 14px
     $font-size.t5-static:
       values:
         default: 16px
     $font-size.t6-static:
       values:
         default: 18px
+    $font-size.t7-static:
+      values:
+        default: 20px
+    $font-size.t8-static:
+      values:
+        default: 22px
+    $font-size.t9-static:
+      values:
+        default: 24px
+    $font-size.t10-static:
+      values:
+        default: 26px

package/gradient.yaml

@@ -2,7 +2,7 @@ kind: Tokens
 metadata:
   id: gradient
   name: Gradient
-  lastUpdated: 25-07-12
+  lastUpdated: 25-08-22
 data:
   collection: color
   tokens:
@@ -29,16 +29,16 @@ data:
         theme-light:
           type: gradient
           value:
-            - color: "#ffffff00"
-              position: 0
             - color: "#000000"
+              position: 0
+            - color: "#ffffff00"
               position: 1
         theme-dark:
           type: gradient
           value:
-            - color: "#16171b00"
-              position: 0
             - color: "#000000"
+              position: 0
+            - color: "#16171b00"
               position: 1
     $gradient.glow-magic:
       description: 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.
@@ -61,31 +61,6 @@ data:
               position: 0.8
             - color: "#333232"
               position: 1
-    $gradient.shimmer-magic:
-      description: Skeleton AI shimmer
-      values:
-        theme-light:
-          type: gradient
-          value:
-            - color: "#fff9f500"
-              position: 0
-            - color: "#fff9f58a"
-              position: 0.46
-            - color: "#fff9f58a"
-              position: 0.54
-            - color: "#fff9f500"
-              position: 1
-        theme-dark:
-          type: gradient
-          value:
-            - color: "#fff9f500"
-              position: 0
-            - color: "#fff9f51a"
-              position: 0.46
-            - color: "#fff9f51a"
-              position: 0.54
-            - color: "#fff9f500"
-              position: 1
     $gradient.glow-magic-pressed:
       description: 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다.
       values:
@@ -132,25 +107,33 @@ data:
               position: 0.54
             - color: "#ffffff00"
               position: 1
-    $gradient.highlight-magic:
-      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.
+    $gradient.shimmer-magic:
+      description: Skeleton AI shimmer
       values:
         theme-light:
           type: gradient
           value:
-            - color: "#ff6600"
-              position: 0.2
-            - color: "#d25aca"
+            - color: "#fff9f500"
+              position: 0
+            - color: "#fff9f58a"
+              position: 0.46
+            - color: "#fff9f58a"
+              position: 0.54
+            - color: "#fff9f500"
               position: 1
         theme-dark:
           type: gradient
           value:
-            - color: "#ff6600"
-              position: 0.2
-            - color: "#d25aca"
+            - color: "#fff9f500"
+              position: 0
+            - color: "#fff9f51a"
+              position: 0.46
+            - color: "#fff9f51a"
+              position: 0.54
+            - color: "#fff9f500"
               position: 1
     $gradient.highlight-magic-pressed:
-      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러의 pressed 컬러입니다.
+      description: ""
       values:
         theme-light:
           type: gradient
@@ -166,3 +149,20 @@ data:
               position: 0.2
             - color: "#e89bee"
               position: 1
+    $gradient.highlight-magic:
+      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#ff6600"
+              position: 0.2
+            - color: "#d25aca"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#ff6600"
+              position: 0.2
+            - color: "#d25aca"
+              position: 1

package/line-height.yaml

@@ -35,3 +35,33 @@ data:
     $line-height.t10:
       values:
         default: 2.1875rem # 35px ÷ 16
+    $line-height.t1-static:
+      values:
+        default: 15px
+    $line-height.t2-static:
+      values:
+        default: 16px
+    $line-height.t3-static:
+      values:
+        default: 18px
+    $line-height.t4-static:
+      values:
+        default: 19px
+    $line-height.t5-static:
+      values:
+        default: 22px
+    $line-height.t6-static:
+      values:
+        default: 24px
+    $line-height.t7-static:
+      values:
+        default: 27px
+    $line-height.t8-static:
+      values:
+        default: 30px
+    $line-height.t9-static:
+      values:
+        default: 32px
+    $line-height.t10-static:
+      values:
+        default: 35px

package/package.json

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