@seed-design/css 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/field.css

@@ -14,7 +14,6 @@
 }
 .seed-field__footer {
     display: flex;
-    justify-content: space-between;
     align-items: flex-start;
     padding-left: var(--seed-dimension-x0_5);
     padding-right: var(--seed-dimension-x0_5);
@@ -42,6 +41,11 @@
     --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
     --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
 }
+.seed-field__characterCountArea {
+    margin-left: auto;
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
 .seed-field__characterCount {
     color: var(--seed-color-fg-neutral);
     font-weight: var(--seed-font-weight-regular);

package/recipes/page-banner.css

@@ -250,4 +250,21 @@
 }
 .seed-page-banner__button--tone_critical-variant_solid {
     color: var(--seed-color-palette-static-white);
+}
+.seed-page-banner__root--tone_magic-variant_weak {
+    background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
+    background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+}
+.seed-page-banner__title--tone_magic-variant_weak {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-page-banner__description--tone_magic-variant_weak {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-page-banner__button--tone_magic-variant_weak {
+    color: var(--seed-color-fg-neutral);
 }

package/recipes/page-banner.d.ts

@@ -6,7 +6,7 @@ declare interface PageBannerVariant {
 /**
   * @default "neutral"
   */
-  tone: "neutral" | "informative" | "positive" | "warning" | "critical";
+  tone: "neutral" | "informative" | "positive" | "warning" | "critical" | "magic";
 }
 
 declare type PageBannerVariantMap = {

package/recipes/page-banner.mjs

@@ -77,6 +77,10 @@ const compoundVariants = [
   {
     "tone": "critical",
     "variant": "solid"
+  },
+  {
+    "tone": "magic",
+    "variant": "weak"
   }
 ];
 
@@ -90,7 +94,8 @@ export const pageBannerVariantMap = {
     "informative",
     "positive",
     "warning",
-    "critical"
+    "critical",
+    "magic"
   ]
 };
 

package/recipes/segmented-control.css

@@ -22,7 +22,7 @@
     width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
     border-radius: var(--seed-radius-full);
     background-color: var(--seed-color-palette-gray-00);
-    box-shadow: 0px 1px 6px 0px #0000000d, inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
 }
 .seed-segmented-control__item {

package/recipes/text-input.css

@@ -26,6 +26,16 @@
     color: var(--seed-color-fg-placeholder);
     font-weight: var(--seed-font-weight-regular);
 }
+.seed-text-input__value:is(:-webkit-autofill, :autofill) {
+    -webkit-text-fill-color: var(--seed-color-fg-neutral);
+    transition: background-color 2147483647s 2147483647s;
+}
+@supports (background-clip: text) {
+    .seed-text-input__value:is(:-webkit-autofill, :autofill) {
+        background-clip: text;
+        transition: none;
+    }
+}
 .seed-text-input__value:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
 }

package/vars/component/callout.d.ts

@@ -170,7 +170,7 @@ export declare const vars: {
   "toneMagic": {
     "enabled": {
       "root": {
-        "color": "var(--seed-gradient-glow-magic)"
+        "gradient": "var(--seed-gradient-glow-magic)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
@@ -190,7 +190,7 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": "var(--seed-gradient-glow-magic-pressed)"
       }
     }
   }

package/vars/component/callout.mjs

@@ -170,7 +170,7 @@ export const vars = {
   "toneMagic": {
     "enabled": {
       "root": {
-        "color": "var(--seed-gradient-glow-magic)"
+        "gradient": "var(--seed-gradient-glow-magic)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
@@ -190,7 +190,7 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": "var(--seed-gradient-glow-magic-pressed)"
       }
     }
   }

package/vars/component/page-banner.d.ts

@@ -305,5 +305,32 @@ export declare const vars: {
         "color": "var(--seed-color-bg-critical-solid-pressed)"
       }
     }
+  },
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+      }
+    }
   }
 }

package/vars/component/page-banner.mjs

@@ -305,5 +305,32 @@ export const vars = {
         "color": "var(--seed-color-bg-critical-solid-pressed)"
       }
     }
+  },
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+      }
+    }
   }
 }

package/vars/component/segmented-control.d.ts

@@ -11,7 +11,6 @@ export declare const vars: {
         "cornerRadius": "var(--seed-radius-full)",
         "strokeWidth": "1px",
         "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "shadow": "0px 1px 6px 0px #0000000d",
         "transformDuration": "var(--seed-duration-d4)",
         "transformTimingFunction": "var(--seed-timing-function-easing)"
       }

package/vars/component/segmented-control.mjs

@@ -11,7 +11,6 @@ export const vars = {
         "cornerRadius": "var(--seed-radius-full)",
         "strokeWidth": "1px",
         "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "shadow": "0px 1px 6px 0px #0000000d",
         "transformDuration": "var(--seed-duration-d4)",
         "transformTimingFunction": "var(--seed-timing-function-easing)"
       }

package/vars/component/skeleton.d.ts

@@ -41,7 +41,7 @@ export declare const vars: {
         "color": "var(--seed-color-palette-gray-200)"
       },
       "shimmer": {
-        "color": "var(--seed-gradient-shimmer-neutral)"
+        "gradient": "var(--seed-gradient-shimmer-neutral)"
       }
     }
   },
@@ -51,7 +51,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-magic-weak)"
       },
       "shimmer": {
-        "color": "var(--seed-gradient-shimmer-magic)"
+        "gradient": "var(--seed-gradient-shimmer-magic)"
       }
     }
   }

package/vars/component/skeleton.mjs

@@ -41,7 +41,7 @@ export const vars = {
         "color": "var(--seed-color-palette-gray-200)"
       },
       "shimmer": {
-        "color": "var(--seed-gradient-shimmer-neutral)"
+        "gradient": "var(--seed-gradient-shimmer-neutral)"
       }
     }
   },
@@ -51,7 +51,7 @@ export const vars = {
         "color": "var(--seed-color-bg-magic-weak)"
       },
       "shimmer": {
-        "color": "var(--seed-gradient-shimmer-magic)"
+        "gradient": "var(--seed-gradient-shimmer-magic)"
       }
     }
   }