@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/duration.yaml

@@ -0,0 +1,25 @@
+kind: Tokens
+metadata:
+  id: duration
+  name: Duration
+data:
+  collection: global
+  tokens:
+    $duration.d1:
+      values:
+        default: 50ms
+    $duration.d2:
+      values:
+        default: 100ms
+    $duration.d3:
+      values:
+        default: 150ms
+    $duration.d4:
+      values:
+        default: 200ms
+    $duration.d5:
+      values:
+        default: 250ms
+    $duration.d6:
+      values:
+        default: 300ms

package/font-size.yaml

@@ -35,3 +35,12 @@ data:
     $font-size.t10:
       values:
         default: 1.625rem # 26px ÷ 16
+    $font-size.t2-static:
+      values:
+        default: 12px
+    $font-size.t5-static:
+      values:
+        default: 16px
+    $font-size.t6-static:
+      values:
+        default: 18px

package/gradient.yaml

@@ -0,0 +1,168 @@
+kind: Tokens
+metadata:
+  id: gradient
+  name: Gradient
+  lastUpdated: 25-07-12
+data:
+  collection: color
+  tokens:
+    $gradient.fade-layer-floating:
+      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#ffffff00"
+              position: 0
+            - color: "#000000"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#1d202500"
+              position: 0
+            - color: "#000000"
+              position: 1
+    $gradient.fade-layer-default:
+      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#ffffff00"
+              position: 0
+            - color: "#000000"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#16171b00"
+              position: 0
+            - color: "#000000"
+              position: 1
+    $gradient.glow-magic:
+      description: 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#fef6f7"
+              position: 0
+            - color: "#fef0e7"
+              position: 0.8
+            - color: "#f9f7f5"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#2d252d"
+              position: 0
+            - color: "#3a312b"
+              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:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#fbf0f2"
+              position: 0
+            - color: "#ffe8db"
+              position: 0.8
+            - color: "#f5f2ef"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#3e333e"
+              position: 0
+            - color: "#51453e"
+              position: 0.8
+            - color: "#434242"
+              position: 1
+    $gradient.shimmer-neutral:
+      description: Skeleton shimmer
+      values:
+        theme-light:
+          type: gradient
+          value:
+            - color: "#ffffff00"
+              position: 0
+            - color: "#ffffff66"
+              position: 0.46
+            - color: "#ffffff66"
+              position: 0.54
+            - color: "#ffffff00"
+              position: 1
+        theme-dark:
+          type: gradient
+          value:
+            - color: "#ffffff00"
+              position: 0
+            - color: "#ffffff1a"
+              position: 0.46
+            - color: "#ffffff1a"
+              position: 0.54
+            - color: "#ffffff00"
+              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
+    $gradient.highlight-magic-pressed:
+      description: 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러의 pressed 컬러입니다.
+      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

package/line-height.yaml

@@ -7,7 +7,7 @@ data:
   tokens:
     $line-height.t1:
       values:
-        default: 0.8125rem # 13px ÷ 16
+        default: 0.9375rem # 15px ÷ 16
     $line-height.t2:
       values:
         default: 1rem # 16px ÷ 16
@@ -19,13 +19,13 @@ data:
         default: 1.1875rem # 19px ÷ 16
     $line-height.t5:
       values:
-        default: 1.3125rem # 21px ÷ 16
+        default: 1.375rem # 22px ÷ 16
     $line-height.t6:
       values:
         default: 1.5rem # 24px ÷ 16
     $line-height.t7:
       values:
-        default: 1.5625rem # 25px ÷ 16
+        default: 1.6875rem # 27px ÷ 16
     $line-height.t8:
       values:
         default: 1.875rem # 30px ÷ 16
@@ -34,4 +34,4 @@ data:
         default: 2rem # 32px ÷ 16
     $line-height.t10:
       values:
-        default: 2.125rem # 34px ÷ 16
+        default: 2.1875rem # 35px ÷ 16

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
-    "directory": "packages/rootage/artifacts"
+    "directory": "packages/rootage"
+  },
+  "scripts": {
+    "rootage:generate": "bun rootage json-schema ./components"
   },
   "main": "package.json",
   "files": [

package/radius.yaml

@@ -5,34 +5,34 @@ metadata:
 data:
   collection: global
   tokens:
-    $radius.x0_5:
+    $radius.r0_5:
       values:
         default: 2px
-    $radius.x1:
+    $radius.r1:
       values:
         default: 4px
-    $radius.x1_5:
+    $radius.r1_5:
       values:
         default: 6px
-    $radius.x2:
+    $radius.r2:
       values:
         default: 8px
-    $radius.x2_5:
+    $radius.r2_5:
       values:
         default: 10px
-    $radius.x3:
+    $radius.r3:
       values:
         default: 12px
-    $radius.x3_5:
+    $radius.r3_5:
       values:
         default: 14px
-    $radius.x4:
+    $radius.r4:
       values:
         default: 16px
-    $radius.x5:
+    $radius.r5:
       values:
         default: 20px
-    $radius.x6:
+    $radius.r6:
       values:
         default: 24px
     $radius.full:

package/timing-function.yaml

@@ -0,0 +1,37 @@
+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]

package/components/expand-button.yaml

@@ -1,34 +0,0 @@
-# yaml-language-server: $schema=./schema.json
-kind: ComponentSpec
-metadata:
-  id: expand-button
-  name: Expand Button
-data:
-  base:
-    enabled:
-      root:
-        color: $color.bg.layer-default
-        minHeight: $unit.x10
-        cornerRadius: $radius.x2
-        gap: $unit.x1
-        paddingX: $unit.x5
-        paddingY: $unit.x2_5
-        strokeColor: $color.palette.gray-400
-        strokeWidth: 1px
-      label:
-        color: $color.fg.neutral
-        fontWeight: $font-weight.bold
-        fontSize: $font-size.t4
-      suffixIcon:
-        color: $color.fg.neutral
-        size: $unit.x3_5
-    pressed:
-      root:
-        color: $color.bg.layer-default-pressed
-    disabled:
-      root:
-        color: $color.bg.disabled
-      label:
-        color: $color.fg.disabled
-      suffixIcon:
-        color: $color.fg.disabled

package/unit.yaml

@@ -1,70 +0,0 @@
-kind: Tokens
-metadata:
-  id: unit
-  name: Unit
-data:
-  collection: global
-  tokens:
-    $unit.x0_5:
-      values:
-        default: 2px
-    $unit.x1:
-      values:
-        default: 4px
-    $unit.x1_5:
-      values:
-        default: 6px
-    $unit.x2:
-      values:
-        default: 8px
-    $unit.x2_5:
-      values:
-        default: 10px
-    $unit.x3:
-      values:
-        default: 12px
-    $unit.x3_5:
-      values:
-        default: 14px
-    $unit.x4:
-      values:
-        default: 16px
-    $unit.x4_5:
-      values:
-        default: 18px
-    $unit.x5:
-      values:
-        default: 20px
-    $unit.x6:
-      values:
-        default: 24px
-    $unit.x7:
-      values:
-        default: 28px
-    $unit.x8:
-      values:
-        default: 32px
-    $unit.x9:
-      values:
-        default: 36px
-    $unit.x10:
-      values:
-        default: 40px
-    $unit.x12:
-      values:
-        default: 48px
-    $unit.x13:
-      values:
-        default: 52px
-    $unit.x14:
-      values:
-        default: 56px
-    $unit.x16:
-      values:
-        default: 64px
-    $horizontal-spacing.between-chips:
-      values:
-        default: $unit.x2
-    $horizontal-spacing.global-gutter:
-      values:
-        default: $unit.x4