@seed-design/css 1.1.8 → 1.1.9-alpha-20251125084640

package/package.json

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

package/recipes/app-bar.css

@@ -252,12 +252,7 @@
     color: var(--seed-icon-color, var(--seed-color-fg-neutral));
 }
 .seed-app-bar__root--tone_transparent {
-    --transparent-gradient-dim-height: 120px;
-    --transparent-gradient-dim-background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 100%);
-}
-.seed-app-bar__root--tone_transparent:before {
-    height: var(--transparent-gradient-dim-height);
-    background: var(--transparent-gradient-dim-background);
+    background-color: #00000000;
 }
 .seed-app-bar__icon--tone_transparent {
     color: var(--seed-icon-color, var(--seed-color-palette-static-white));

package/recipes/app-screen.css

@@ -265,4 +265,26 @@
 }
 .seed-app-screen__layer--layerOffsetBottom_safeArea {
     padding-bottom: var(--seed-safe-area-bottom);
+}
+.seed-app-screen__layer--tone_transparent-gradient_true::before {
+    content: '';
+    display: block;
+    position: sticky;
+    left: 0;
+    right: 0;
+    top: 0;
+    margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
+    height: calc(66px + 400px + var(--seed-safe-area-top));
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.35) 400px, rgba(0, 0, 0, 0.00) 100%);
+    pointer-events: none;
+    z-index: 1;
+}
+.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none::before {
+    transform: translateY(-400px);
+}
+.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea::before {
+    transform: translateY(calc(-400px - var(--seed-safe-area-top)));
+}
+.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar::before {
+    transform: translateY(calc(-400px - var(--app-bar-offset)));
 }

package/recipes/app-screen.d.ts

@@ -19,6 +19,10 @@ declare interface AppScreenVariant {
   * @default "layer"
   */
   tone: "layer" | "transparent";
+/**
+  * @default true
+  */
+  gradient: boolean;
 }
 
 declare type AppScreenVariantMap = {

package/recipes/app-screen.mjs

@@ -25,10 +25,31 @@ const defaultVariant = {
   "transitionStyle": "slideFromRightIOS",
   "layerOffsetTop": "appBar",
   "layerOffsetBottom": "none",
-  "tone": "layer"
+  "tone": "layer",
+  "gradient": true
 };
 
-const compoundVariants = [];
+const compoundVariants = [
+  {
+    "tone": "transparent",
+    "gradient": true
+  },
+  {
+    "tone": "transparent",
+    "gradient": true,
+    "layerOffsetBottom": "none"
+  },
+  {
+    "tone": "transparent",
+    "gradient": true,
+    "layerOffsetTop": "safeArea"
+  },
+  {
+    "tone": "transparent",
+    "gradient": true,
+    "layerOffsetTop": "appBar"
+  }
+];
 
 export const appScreenVariantMap = {
   "theme": [
@@ -51,6 +72,10 @@ export const appScreenVariantMap = {
   "tone": [
     "layer",
     "transparent"
+  ],
+  "gradient": [
+    true,
+    false
   ]
 };
 

package/recipes/avatar.css

@@ -29,6 +29,7 @@
     mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
     mask-repeat: no-repeat;
     mask-composite: subtract;
+    transform: translateZ(0);
 }
 .seed-avatar__image {
     display: block;
@@ -46,6 +47,7 @@
     mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
     mask-repeat: no-repeat;
     mask-composite: subtract;
+    transform: translateZ(0);
 }
 .seed-avatar__image:not([data-loading-state='loaded']) {
     display: none;
@@ -69,6 +71,7 @@
     mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
     mask-repeat: no-repeat;
     mask-composite: subtract;
+    transform: translateZ(0);
 }
 .seed-avatar__fallback[data-loading-state='loaded'] {
     display: none;