refactor: 새 rootage 스키마에 맞게 수정해요

daangn · Nov 27, 2024 · 3757961 · 3757961
1 parent 580f6ab
commit 3757961
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 206 deletions.
diff --git a/packages/component-spec/artifacts/callout.yaml b/packages/component-spec/artifacts/callout.yaml
diff --git a/packages/component-spec/cli/bin/index.mjs b/packages/component-spec/cli/bin/index.mjs
diff --git a/packages/recipe-generator/preset/src/callout.recipe.ts b/packages/recipe-generator/preset/src/callout.recipe.ts
@@ -48,8 +48,8 @@ export const callout = defineRecipe({
       paddingBlock: vars.base.enabled.content.paddingY,
 
       fontSize: vars.base.enabled.content.fontSize,
-      // XXX
-      lineHeight: "1.3125rem",
+      lineHeight: vars.base.enabled.content.lineHeight,
+
       textAlign: "start",
 
       [pseudo(":only-child")]: {

diff --git a/packages/rootage/artifacts/components/callout.yaml b/packages/rootage/artifacts/components/callout.yaml
@@ -7,93 +7,131 @@ data:
   base:
     enabled:
       root:
-        minHeight: $unit.x12
-        paddingX: $unit.x4
-        paddingY: $unit.x3_5
+        paddingXStart: $unit.x3_5
+        paddingXEnd: $unit.x0_5
+        paddingY: 5px
         cornerRadius: $radius.x2_5
-      title:
+      content:
+        gap: $unit.x3
+        paddingY: 9.5px
         fontSize: $font-size.t4
+        lineHeight: $line-height.t5
+      icon:
+        # XXX: scalable 결정 x
+        size: $unit.x4
+      title:
         fontWeight: $font-weight.bold
-      description:
-        fontSize: $font-size.t4
+      label:
         fontWeight: $font-weight.regular
-      icon:
+      dismissButton:
+        size: $unit.x10
+      dismissIcon:
+        size: $unit.x4
+      actionableIcon:
         size: $unit.x4
-        marginRight: $unit.x1_5
-      actionIndicator:
-        size: $unit.x4_5
-        marginLeft: $unit.x2_5
-      closeButton:
-        size: $unit.x4_5
-        marginLeft: $unit.x2_5
-  variant=outline:
+        margin: $unit.x3
+
+  type=contentOnly:
     enabled:
-      root:
-        strokeColor: $color.stroke.neutral
-        strokeWidth: 1px
-      title:
-        color: $color.fg.neutral
-      description:
-        color: $color.fg.neutral
-      icon:
-        color: $color.fg.neutral
-      actionIndicator:
-        color: $color.fg.neutral
-      closeButton:
-        color: $color.fg.neutral
+      content:
+        paddingXEnd: $unit.x3
+
   variant=neutral:
     enabled:
       root:
         color: $color.bg.neutral-weak
+      icon:
+        color: $color.fg.neutral
       title:
         color: $color.fg.neutral
-      description:
+      label:
         color: $color.fg.neutral
-      icon:
+      linkLabel:
         color: $color.fg.neutral
-      actionIndicator:
+      dismissIcon:
         color: $color.fg.neutral
-      closeButton:
+      actionableIcon:
         color: $color.fg.neutral
+    pressed:
+      root:
+        color: $color.bg.neutral-weak-pressed
+
   variant=informative:
     enabled:
       root:
         color: $color.bg.informative-weak
+      icon:
+        color: $color.fg.informative-contrast
       title:
         color: $color.fg.informative-contrast
-      description:
+      label:
         color: $color.fg.informative-contrast
-      icon:
+      linkLabel:
         color: $color.fg.informative-contrast
-      actionIndicator:
+      dismissIcon:
         color: $color.fg.informative-contrast
-      closeButton:
+      actionableIcon:
         color: $color.fg.informative-contrast
+    pressed:
+      root:
+        color: $color.bg.informative-weak-pressed
+
   variant=warning:
     enabled:
       root:
         color: $color.bg.warning-weak
+      icon:
+        color: $color.fg.warning-contrast
       title:
         color: $color.fg.warning-contrast
-      description:
+      label:
         color: $color.fg.warning-contrast
-      icon:
+      linkLabel:
         color: $color.fg.warning-contrast
-      actionIndicator:
+      dismissIcon:
         color: $color.fg.warning-contrast
-      closeButton:
+      actionableIcon:
         color: $color.fg.warning-contrast
+    pressed:
+      root:
+        color: $color.bg.warning-weak-pressed
+
   variant=danger:
     enabled:
       root:
         color: $color.bg.danger-weak
+      icon:
+        color: $color.fg.danger-contrast
       title:
         color: $color.fg.danger-contrast
-      description:
+      label:
         color: $color.fg.danger-contrast
-      icon:
+      linkLabel:
         color: $color.fg.danger-contrast
-      actionIndicator:
+      dismissIcon:
         color: $color.fg.danger-contrast
-      closeButton:
+      actionableIcon:
         color: $color.fg.danger-contrast
+    pressed:
+      root:
+        color: $color.bg.danger-weak-pressed
+
+  variant=magic:
+    enabled:
+      root:
+        color: $color.bg.magic-weak
+      icon:
+        color: $color.fg.magic-contrast
+      title:
+        color: $color.fg.magic-contrast
+      label:
+        color: $color.fg.magic-contrast
+      linkLabel:
+        color: $color.fg.magic-contrast
+      dismissIcon:
+        color: $color.fg.magic-contrast
+      actionableIcon:
+        color: $color.fg.magic-contrast
+    pressed:
+      root:
+        color: $color.bg.magic-weak-pressed
diff --git a/packages/stylesheet/callout.css b/packages/stylesheet/callout.css
@@ -5,10 +5,10 @@
     width: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    padding-inline-start: var(--seed-v3-unit-3\.5);
-    padding-inline-end: var(--seed-v3-unit-0\.5);
+    padding-inline-start: var(--seed-v3-unit-x3_5);
+    padding-inline-end: var(--seed-v3-unit-x0_5);
     padding-block: 5px;
-    border-radius: var(--seed-v3-radii-2\.5);
+    border-radius: var(--seed-v3-radius-x2_5);
 }
 .callout__root:is(button) {
     cursor: pointer;
@@ -18,19 +18,19 @@
 .callout__content {
     display: flex;
     align-items: center;
-    gap: var(--seed-v3-unit-3);
+    gap: var(--seed-v3-unit-x3);
     padding-block: 9.5px;
-    font-size: var(--seed-v3-font-size-100);
-    line-height: 1.3125rem;
+    font-size: var(--seed-v3-font-size-t4);
+    line-height: var(--seed-v3-line-height-t5);
     text-align: start;
 }
 .callout__content:only-child {
-    padding-inline-end: var(--seed-v3-unit-3);
+    padding-inline-end: var(--seed-v3-unit-x3);
 }
 .callout__icon {
     flex: none;
-    width: var(--seed-v3-unit-4);
-    height: var(--seed-v3-unit-4);
+    width: var(--seed-v3-unit-x4);
+    height: var(--seed-v3-unit-x4);
 }
 .callout__title {
     font-weight: var(--seed-v3-font-weight-bold);
@@ -53,25 +53,25 @@
 }
 .callout__actionableIcon {
     flex: none;
-    width: var(--seed-v3-unit-4);
-    height: var(--seed-v3-unit-4);
-    margin: var(--seed-v3-unit-3);
+    width: var(--seed-v3-unit-x4);
+    height: var(--seed-v3-unit-x4);
+    margin: var(--seed-v3-unit-x3);
 }
 .callout__dismissButton {
     flex: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: var(--seed-v3-unit-10);
-    height: var(--seed-v3-unit-10);
+    width: var(--seed-v3-unit-x10);
+    height: var(--seed-v3-unit-x10);
     border: none;
     background-color: transparent;
     padding: 0;
     cursor: pointer;
 }
 .callout__dismissIcon {
-    width: var(--seed-v3-unit-4);
-    height: var(--seed-v3-unit-4);
+    width: var(--seed-v3-unit-x4);
+    height: var(--seed-v3-unit-x4);
 }
 .callout__root--variant_neutral {
     background-color: var(--seed-v3-color-bg-neutral-weak);