feat: overridable props #809

coderabbitai · 2025-07-24T01:53:37Z

💡 Verification agent

🧩 Analysis chain

var() 래핑 로직 검증이 필요합니다.

현재 구현에서 valueStr.startsWith(\var(${cssVar},`)`로 중복 래핑을 방지하고 있지만, 다른 형태의 var() 표현식이나 공백이 포함된 경우를 고려해야 합니다.

다음 스크립트로 다양한 var() 표현식 패턴을 확인해보겠습니다:

🏁 Script executed:

#!/bin/bash # var() 사용 패턴 확인을 위한 CSS 파일들 검색 rg -A 2 -B 2 "var$--seed-box-(color|background|border-color)" --type css

Length of output: 275193

var() 래핑 로직 정교화 필요

현재 valueStr.startsWith(\var(${cssVar},`)` 검사로는 아래 같은 경우를 놓칠 수 있습니다.

Fallback 없이 var(--cssVar) 형태로만 사용된 경우

괄호 안·앞뒤 공백이 있는 경우 (var( --cssVar , … ) 등)

정규식 기반 검사로 아래와 같이 보완하세요:

// ecosystem/qvism/core/src/parser.ts (77–83) if (name in OVERRIDABLE_PROPERTIES) { const cssVar = OVERRIDABLE_PROPERTIES[name]; // var(--cssVar, …) 또는 var(--cssVar) 모두 건너뛰도록 const varRegex = new RegExp(`^var\\(\\s*${cssVar}\\s*(?:,|\$)`); if (!varRegex.test(valueStr)) { valueStr = `var(${cssVar}, ${valueStr})`; } }

RegExp 에서 (?:,|\)) 를 사용해 콤마가 있거나(var(--cssVar, …)), 없거나(var(--cssVar)) 모두 감지

\\s* 로 공백 포함 형태까지 커버

위와 같이 수정 후 다양한 var() 패턴에서도 중복 래핑이 발생하지 않는지 재검증해 주세요.

🤖 Prompt for AI Agents

In ecosystem/qvism/core/src/parser.ts around lines 77 to 83, the current check using valueStr.startsWith for detecting if valueStr is already wrapped with var(cssVar) misses cases without fallback and with spaces. Replace this check with a regular expression that matches var(cssVar) with optional spaces and either a comma or closing parenthesis, ensuring both var(--cssVar) and var(--cssVar, ...) forms are detected. Use a RegExp like ^var$\s*cssVar\s*(?:,|$) to test valueStr and only wrap with var(cssVar, valueStr) if the regex does not match. After updating, verify no duplicate wrapping occurs for various var() patterns.

coderabbitai · 2025-07-24T01:53:38Z

🛠️ Refactor suggestion

⚠️ Potential issue

순환 참조(fallback loop)로 인해 CSS 속성이 무효화될 위험이 있습니다
var(--seed-box-background, var(--seed-box-background)) 형태로 동일 변수를 중첩 사용하면, 변수 미정의 시 폴백도 동일 미정의 상태가 되어 브라우저가 값을 무효화(ignored)합니다. color, border-color 역시 동일 문제입니다.

- background: var(--seed-box-background, var(--seed-box-background)); - color: var(--seed-box-color, var(--seed-box-color)); + /* 변수가 없을 때 기본값을 지정해 순환 참조를 방지합니다. */ + background: var(--seed-box-background, initial); + color: var(--seed-box-color, currentColor); ... - border-color: var(--seed-box-border-color, var(--seed-box-border-color)); + border-color: var(--seed-box-border-color, initial);

이대로 릴리스되면 .seed-box가 테마 변수 없이 사용될 때 배경·글자색·테두리가 모두 사라질 수 있습니다. 수정 권장합니다.

Also applies to: 82-83

🤖 Prompt for AI Agents

In packages/css/base.css around lines 74 to 79 and also lines 82 to 83, the CSS custom properties use fallback values that reference themselves, causing a circular fallback loop which invalidates the properties. To fix this, replace fallback values like var(--seed-box-background, var(--seed-box-background)) with a valid default value or remove the fallback to avoid self-referencing. Apply the same correction to color and border-color properties to ensure they have proper fallback values and do not get ignored by the browser.

coderabbitai · 2025-07-24T01:53:38Z

🛠️ Refactor suggestion

아이콘 색상까지 오버라이드 가능하도록 수정 제안

버튼 본문은 --seed-box-color를 쓰지만 아이콘은 고정 토큰이라 덮어쓰기 시 색상이 불일치합니다. 아래처럼 보조 변수도 동일 경로를 사용하면 해결됩니다.

- --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); + --seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white)); + --seed-suffix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white)); + --seed-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

background: var(--seed-box-background, var(--seed-color-bg-brand-solid));

color: var(--seed-box-color, var(--seed-color-palette-static-white));

--seed-prefix-icon-color: var(--seed-color-palette-static-white);

--seed-suffix-icon-color: var(--seed-color-palette-static-white);

--seed-icon-color: var(--seed-color-palette-static-white);

--track-color: var(--seed-color-palette-static-white-alpha-300);

--range-color: var(--seed-color-palette-static-white);

}

.seed-action-button--variant_brandSolid:is(:active, [data-active]) {

background: var(--seed-box-background, var(--seed-color-bg-brand-solid));

color: var(--seed-box-color, var(--seed-color-palette-static-white));

--seed-prefix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));

--seed-suffix-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));

--seed-icon-color: var(--seed-box-color, var(--seed-color-palette-static-white));

--track-color: var(--seed-color-palette-static-white-alpha-300);

--range-color: var(--seed-color-palette-static-white);

}

.seed-action-button--variant_brandSolid:is(:active, [data-active]) {

🤖 Prompt for AI Agents

In packages/css/recipes/action-button.css around lines 49 to 57, the icon colors are currently fixed tokens and do not follow the button text color variable, causing color inconsistencies when overriding. To fix this, update the icon color CSS variables (--seed-prefix-icon-color, --seed-suffix-icon-color, --seed-icon-color) to use the same variable path as --seed-box-color, allowing consistent color overrides for both button text and icons.

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,14 @@ const UNITLESS: Record<string, boolean> = { @@
       "stroke-width": true,
     };
+    // Override 가능한 CSS 속성과 대응하는 CSS 변수
+    const OVERRIDABLE_PROPERTIES: Record<string, string> = {
+      background: "--seed-box-background",
+      "background-color": "--seed-box-background",
+      color: "--seed-box-color",
+      "border-color": "--seed-box-border-color",
+    };
     function dashify(str: string): string {
       return str
         .replace(/([A-Z])/g, "-$1")
@@ Expand Down Expand Up @@
         valueStr = String(value);
       }
+      if (name in OVERRIDABLE_PROPERTIES) {
+        const cssVar = OVERRIDABLE_PROPERTIES[name];
+        // 이미 해당 CSS 변수로 래핑되어 있지 않은 경우만 처리
+        if (!valueStr.startsWith(`var(${cssVar},`)) {
+          valueStr = `var(${cssVar}, ${valueStr})`;
+        }
+      }
       if (name === "css-float") name = "float";
       if (IMPORTANT.test(valueStr)) {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ @@
     .seed-icon {
       width: var(--seed-icon-size);
       height: var(--seed-icon-size);
-      color: var(--seed-icon-color, currentColor);
+      color: var(--seed-box-color, var(--seed-icon-color, currentColor));
     }
     .seed-prefix-icon {
@@ Expand All / @@ -52,7 +52,7 @@ @@
       margin-left: var(--seed-prefix-icon-margin-left);
       margin-right: var(--seed-prefix-icon-margin-right);
       margin-top: var(--seed-prefix-icon-margin-top);
-      color: var(--seed-prefix-icon-color, currentColor);
+      color: var(--seed-box-color, var(--seed-prefix-icon-color, currentColor));
     }
     .seed-suffix-icon {
@@ Expand All / @@ -61,25 +61,25 @@ @@
       margin-left: var(--seed-suffix-icon-margin-left);
       margin-right: var(--seed-suffix-icon-margin-right);
       margin-top: var(--seed-suffix-icon-margin-top);
-      color: var(--seed-suffix-icon-color, currentColor);
+      color: var(--seed-box-color, var(--seed-suffix-icon-color, currentColor));
     }
     .seed-count {
       font-size: var(--seed-count-font-size);
       line-height: var(--seed-count-line-height);
       font-weight: var(--seed-count-font-weight);
-      color: var(--seed-count-color);
+      color: var(--seed-box-color, var(--seed-count-color));
     }
     .seed-box {
       --seed-box-background: initial;
       --seed-box-color: initial;
-      background: var(--seed-box-background);
-      color: var(--seed-box-color);
+      background: var(--seed-box-background, var(--seed-box-background));
+      color: var(--seed-box-color, var(--seed-box-color));
       --seed-box-border-style: solid;
       --seed-box-border-color: initial;
       border-style: var(--seed-box-border-style);
-      border-color: var(--seed-box-border-color);
+      border-color: var(--seed-box-border-color, var(--seed-box-border-color));
       --seed-box-border-width: 0;
       --seed-box-border-top-width: var(--seed-box-border-width);
       --seed-box-border-bottom-width: var(--seed-box-border-width);
@@ Expand Down Expand Up / @@ -171,7 +171,7 @@ @@
     .seed-box:is(:active, [data-active]) {
       --seed-box-background--active: var(--seed-box-background);
-      background: var(--seed-box-background--active);
+      background: var(--seed-box-background, var(--seed-box-background--active));
     }
     .seed-consistent-width:before {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,23 +15,23 @@ @@
         line-height: 1;
         font-weight: var(--seed-font-weight-medium);
         border-radius: var(--seed-radius-full);
-        background: var(--seed-color-bg-neutral-weak);
-        color: var(--seed-color-fg-neutral);
+        background: var(--seed-box-background, var(--seed-color-bg-neutral-weak));
+        color: var(--seed-box-color, var(--seed-color-fg-neutral));
         --seed-prefix-icon-color: var(--seed-color-fg-neutral);
         --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
         --seed-icon-color: var(--seed-color-fg-neutral);
         --seed-count-font-weight: var(--seed-font-weight-medium);
         --seed-count-color: var(--seed-color-fg-neutral-muted);
     }
     .seed-action-chip:is(:active, [data-active]) {
-        background: var(--seed-color-bg-neutral-weak-pressed);
+        background: var(--seed-box-background, var(--seed-color-bg-neutral-weak-pressed));
     }
     .seed-action-chip:is(:focus, [data-focus]) {
         outline: none;
     }
     .seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
-        background: var(--seed-color-bg-disabled);
-        color: var(--seed-color-fg-disabled);
+        background: var(--seed-box-background, var(--seed-color-bg-disabled));
+        color: var(--seed-box-color, var(--seed-color-fg-disabled));
         cursor: not-allowed;
         --seed-prefix-icon-color: var(--seed-color-fg-disabled);
         --seed-suffix-icon-color: var(--seed-color-fg-disabled);
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
         align-items: center;
         justify-content: center;
         position: relative;
-        background-color: var(--seed-color-bg-layer-floating);
+        background-color: var(--seed-box-background, var(--seed-color-bg-layer-floating));
         min-height: 50px;
         padding-inline: var(--seed-dimension-spacing-x-global-gutter);
         padding-block: var(--seed-dimension-x3_5);
@@ Expand All / @@ -12,7 +12,7 @@ @@
         font-weight: var(--seed-font-weight-regular);
     }
     .seed-action-sheet-item:is(:active, [data-active]) {
-        background-color: var(--seed-color-bg-layer-floating-pressed);
+        background-color: var(--seed-box-background, var(--seed-color-bg-layer-floating-pressed));
     }
     .seed-action-sheet-item:after {
         content: '';
@@ Expand All / @@ -22,11 +22,11 @@ @@
         right: var(--seed-dimension-spacing-x-global-gutter);
         bottom: 0;
         height: 1px;
-        background: var(--seed-color-stroke-neutral);
+        background: var(--seed-box-background, var(--seed-color-stroke-neutral));
     }
     .seed-action-sheet-item--tone_neutral {
-        color: var(--seed-color-fg-neutral);
+        color: var(--seed-box-color, var(--seed-color-fg-neutral));
     }
     .seed-action-sheet-item--tone_critical {
-        color: var(--seed-color-fg-critical);
+        color: var(--seed-box-color, var(--seed-color-fg-critical));
     }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: overridable props #809

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Jul 24, 2025

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot Jul 24, 2025

Uh oh!

Uh oh!

coderabbitai bot Jul 24, 2025

Uh oh!

Uh oh!

feat: overridable props #809

Are you sure you want to change the base?

Uh oh!

feat: overridable props #809

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!