feat: rootage generate

daangn · Dec 5, 2024 · c90be17 · c90be17
1 parent db215b1
commit c90be17
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 79 deletions.
diff --git a/packages/rootage/artifacts/components/progress-circle.yaml b/packages/rootage/artifacts/components/progress-circle.yaml
@@ -1,41 +1,55 @@
 # yaml-language-server: $schema=./schema.json
-base:
-  enabled:
-    root: null
-    track:
-      fill: "#0017580d"
-    indicator:
-      color: "#d1d3d8"
-    indicator-path: null
-size=small:
-  enabled:
-    root:
-      size: $unit.x6
-    track: null
-    indicator: null
-size=medium:
-  enabled:
-    root:
-      size: $unit.x10
-    track: null
-    indicator: null
-variant=indeterminate:
-  enabled:
-    root: null
-    track: null
-    indicator: null
-    indicator-path:
-      headDashDuration: 1.2s
-      tailDashDuration: 1.2s
-      rotateDuration: 1.2s
-      headDashTimingFunction: cubic-bezier(0.35, 0, 0.65, 1)
-      tailDashTimingFunction: cubic-bezier(0.35, 0, 0.65, 0.6)
-      rotateTimingFunction: cubic-bezier(0.35, 0.25, 0.65, 0.75)
-variant=determinate:
-  enabled:
-    root: null
-    track: null
-    indicator: null
-    indicator-path:
-      transitionDuration: 0.4s
-      transitionTimingFunction: cubic-bezier(0, 0, 0.15, 1)
+# parts: root, track, indicator
+kind: ComponentSpec
+metadata:
+  id: progress-circle
+  name: Progress Circle
+data:
+  base:
+    enabled:
+      indicator:
+        transitionDuration: 0.3s
+        transitionTimingFunction:
+          type: cubicBezier
+          value: [0, 0, 0.15, 1]
+  size=small:
+    enabled:
+      root:
+        size: $unit.x6
+  size=medium:
+    enabled:
+      root:
+        size: $unit.x10
+  indeterminate=true:
+    enabled:
+      indicator:
+        headDuration: 1.2s
+        tailDuration: 1.2s
+        rotateDuration: 1.2s
+        headTimingFunction:
+          type: cubicBezier
+          value: [0.35, 0, 0.65, 1]
+        tailTimingFunction:
+          type: cubicBezier
+          value: [0.35, 0, 0.65, 0.6]
+        rotateTimingFunction:
+          type: cubicBezier
+          value: [0.35, 0.25, 0.65, 0.75]
+  variant=neutral:
+    enabled:
+      track:
+        fill: $color.palette.gray-300
+      indicator:
+        color: $color.palette.gray-600
+  variant=brand:
+    enabled:
+      track:
+        fill: $color.palette.carrot-200
+      indicator:
+        color: $color.bg.brand-solid
+  variant=white:
+    enabled:
+      track:
+        fill: $color.palette.gray-600
+      indicator:
+        color: $color.bg.static-white
diff --git a/packages/stylesheet/progressCircle.css b/packages/stylesheet/progressCircle.css
@@ -6,8 +6,7 @@
     position: absolute;
     inset: 0;
     width: 100%;
-    height: 100%;
-    fill: #0017580d
+    height: 100%
 }
 .progressCircle__indicator {
     display: inline-flex;
@@ -17,7 +16,8 @@
     inset: 0;
     width: 100%;
     height: 100%;
-    color: #d1d3d8
+    transition-timing-function: cubic-bezier(0, 0, 0.15, 1);
+    transition-duration: 0.3s
 }
 .progressCircle__indicator-path {
     stroke: currentColor;
@@ -29,13 +29,31 @@
     transform-origin: center;
     transform-box: fill-box
 }
+.progressCircle__track--variant_neutral {
+    fill: var(--seed-v3-color-palette-gray-300)
+}
+.progressCircle__indicator--variant_neutral {
+    color: var(--seed-v3-color-palette-gray-600)
+}
+.progressCircle__track--variant_brand {
+    fill: var(--seed-v3-color-palette-carrot-200)
+}
+.progressCircle__indicator--variant_brand {
+    color: var(--seed-v3-color-bg-brand-solid)
+}
+.progressCircle__track--variant_white {
+    fill: var(--seed-v3-color-palette-gray-600)
+}
+.progressCircle__indicator--variant_white {
+    color: var(--seed-v3-color-bg-static-white)
+}
 .progressCircle__root--size_small {
-    width: var(--seed-v3-unit-6);
-    height: var(--seed-v3-unit-6)
+    width: var(--seed-v3-unit-x6);
+    height: var(--seed-v3-unit-x6)
 }
 .progressCircle__root--size_medium {
-    width: var(--seed-v3-unit-10);
-    height: var(--seed-v3-unit-10)
+    width: var(--seed-v3-unit-x10);
+    height: var(--seed-v3-unit-x10)
 }
 .progressCircle__root--indeterminate_true {
     animation: rotate 1.2s cubic-bezier(0.35, 0.25, 0.65, 0.75) infinite
@@ -47,7 +65,7 @@
 
 }
 .progressCircle__indicator-path--indeterminate_false {
-    transition-duration: var(--seed-spinner-determinate-duration, 0.4s);
+    transition-duration: var(--seed-spinner-determinate-duration, 0.3s);
     transition-timing-function: var(--seed-spinner-determinate-timing-function, cubic-bezier(0, 0, 0.15, 1));
     transition-property: stroke-dasharray
 }

diff --git a/packages/vars/src/component/progress-circle.vars.ts b/packages/vars/src/component/progress-circle.vars.ts
@@ -1,57 +1,65 @@
 export const vars = {
   "base": {
     "enabled": {
-      "root": {},
-      "track": {
-        "fill": "#0017580d"
-      },
       "indicator": {
-        "color": "#d1d3d8"
-      },
-      "indicator-path": {}
+        "transitionDuration": "0.3s",
+        "transitionTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
+      }
     }
   },
   "sizeSmall": {
     "enabled": {
       "root": {
-        "size": "var(--seed-v3-unit-6)"
-      },
-      "track": {},
-      "indicator": {}
+        "size": "var(--seed-v3-unit-x6)"
+      }
     }
   },
   "sizeMedium": {
     "enabled": {
       "root": {
-        "size": "var(--seed-v3-unit-10)"
-      },
-      "track": {},
-      "indicator": {}
+        "size": "var(--seed-v3-unit-x10)"
+      }
     }
   },
-  "variantIndeterminate": {
+  "indeterminateTrue": {
     "enabled": {
-      "root": {},
-      "track": {},
-      "indicator": {},
-      "indicator-path": {
-        "headDashDuration": "1.2s",
-        "tailDashDuration": "1.2s",
+      "indicator": {
+        "headDuration": "1.2s",
+        "tailDuration": "1.2s",
         "rotateDuration": "1.2s",
-        "headDashTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
-        "tailDashTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
+        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
+        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
         "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
       }
     }
   },
-  "variantDeterminate": {
+  "variantNeutral": {
     "enabled": {
-      "root": {},
-      "track": {},
-      "indicator": {},
-      "indicator-path": {
-        "transitionDuration": "0.4s",
-        "transitionTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
+      "track": {
+        "fill": "var(--seed-v3-color-palette-gray-300)"
+      },
+      "indicator": {
+        "color": "var(--seed-v3-color-palette-gray-600)"
+      }
+    }
+  },
+  "variantBrand": {
+    "enabled": {
+      "track": {
+        "fill": "var(--seed-v3-color-palette-carrot-200)"
+      },
+      "indicator": {
+        "color": "var(--seed-v3-color-bg-brand-solid)"
+      }
+    }
+  },
+  "variantWhite": {
+    "enabled": {
+      "track": {
+        "fill": "var(--seed-v3-color-palette-gray-600)"
+      },
+      "indicator": {
+        "color": "var(--seed-v3-color-bg-static-white)"
       }
     }
   }