@seed-design/css 1.1.0 → 1.1.4

package/all.css

@@ -1343,8 +1343,12 @@
 }
 
 .seed-app-bar__iconButton {
+  background: none;
+  border: none;
   justify-content: center;
   align-items: center;
+  padding: 0;
+  font-family: inherit;
   display: flex;
 }
 
@@ -1567,8 +1571,14 @@
   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, #00000059 0%, #0000 100%);
+}
+
 .seed-app-bar__root--tone_transparent:before {
-  background-color: #0000;
+  height: var(--transparent-gradient-dim-height);
+  background: var(--transparent-gradient-dim-background);
 }
 
 .seed-app-bar__icon--tone_transparent {
@@ -2017,24 +2027,6 @@
   padding-bottom: var(--seed-safe-area-bottom);
 }
 
-.seed-app-screen__layer--tone_transparent {
-  --transparent-gradient-dim-height: 120px;
-  --transparent-gradient-dim-offset: -54px;
-  --transparent-gradient-dim-background: linear-gradient(180deg, #00000059 0%, #0000 100%);
-}
-
-.seed-app-screen__layer--tone_transparent:after {
-  content: "";
-  height: var(--transparent-gradient-dim-height);
-  transform: translateY(var(--transparent-gradient-dim-offset));
-  background: var(--transparent-gradient-dim-background);
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
 .seed-article {
   user-select: text;
   word-break: normal;
@@ -2720,6 +2712,7 @@
   --seed-prefix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   border: none;
+  text-decoration: none;
   display: flex;
 }
 
@@ -4537,6 +4530,7 @@
   transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   background-color: #0000;
   border: none;
+  padding: 0;
   position: absolute;
   inset: 0;
 }
@@ -4628,6 +4622,7 @@
   --seed-icon-color: var(--seed-color-fg-neutral-subtle);
   background-color: #0000;
   border: none;
+  padding: 0;
 }
 
 .seed-link-content {
@@ -4680,6 +4675,7 @@
 .seed-list-header {
   align-items: center;
   gap: var(--seed-dimension-x2_5);
+  box-sizing: border-box;
   width: 100%;
   padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   padding-block: var(--seed-dimension-x2);
@@ -4759,9 +4755,13 @@
   align-items: flex-start;
   gap: var(--seed-box-gap);
   --seed-box-padding-right: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-box-padding-right);
+  padding: 0 var(--seed-box-padding-right) 0 0;
+  background: none;
+  border: none;
   flex-direction: column;
   flex-grow: 1;
+  font-family: inherit;
+  text-decoration: none;
   display: inline-flex;
 }
 
@@ -5025,6 +5025,7 @@
   font-size: var(--seed-font-size-t6);
   line-height: var(--seed-line-height-t6);
   font-weight: var(--seed-font-weight-bold);
+  margin: 0;
 }
 
 .seed-menu-sheet__list {
@@ -5056,9 +5057,12 @@
   padding-block: var(--seed-dimension-x3_5);
   border-radius: var(--seed-radius-r3);
   color: var(--seed-color-fg-neutral);
+  font-family: inherit;
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-medium);
+  border: none;
+  outline: none;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -5079,6 +5083,9 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  border: none;
+  outline: none;
+  font-family: inherit;
   display: flex;
 }
 
@@ -5726,6 +5733,32 @@
   --seed-prefix-icon-size: 18px;
 }
 
+.seed-scroll-fog {
+  --scroll-fog-from-color: #0000;
+  --scroll-fog-to-color: #000;
+  width: 100%;
+  height: 100%;
+  mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
+  -webkit-mask-composite: source-in;
+  position: relative;
+  overflow: auto;
+  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+}
+
+.seed-scroll-fog--hideScrollBar_true {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar {
+  display: none;
+}
+
 .seed-segmented-control__root {
   box-sizing: border-box;
   max-width: 100%;
@@ -6941,10 +6974,9 @@
 }
 
 .seed-text-input__root {
-  align-items: center;
-  gap: var(--seed-dimension-x2_5);
   width: 100%;
   transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing);
+  align-items: center;
   display: flex;
   overflow: hidden;
 }
@@ -6967,11 +6999,6 @@
   width: 0;
 }
 
-.seed-text-input__value:is(textarea) {
-  min-height: 95px;
-  padding-block: var(--seed-dimension-x3_5);
-}
-
 .seed-text-input__value::placeholder {
   color: var(--seed-color-fg-placeholder);
   font-weight: var(--seed-font-weight-regular);
@@ -6981,10 +7008,6 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-text-input__value[data-readonly], .seed-text-input__value[data-readonly]::placeholder {
-  color: var(--seed-color-fg-neutral-muted);
-}
-
 .seed-text-input__prefixText {
   color: var(--seed-color-fg-neutral-muted);
   font-weight: var(--seed-font-weight-regular);
@@ -7006,7 +7029,6 @@
 }
 
 .seed-text-input__root--variant_outline {
-  min-height: var(--seed-dimension-x13);
   border-radius: var(--seed-radius-r3);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
@@ -7019,15 +7041,10 @@
   box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]) {
+.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]), .seed-text-input__root--variant_outline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])) {
   background-color: var(--seed-color-bg-disabled);
 }
 
-.seed-text-input__value--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
 .seed-text-input__value--variant_outline:first-child {
   padding-inline-start: var(--seed-dimension-x4);
 }
@@ -7036,43 +7053,16 @@
   padding-inline-end: var(--seed-dimension-x4);
 }
 
-.seed-text-input__value--variant_outline::placeholder, .seed-text-input__prefixText--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
-.seed-text-input__prefixText--variant_outline:first-child {
-  margin-inline-start: var(--seed-dimension-x4);
-}
-
-.seed-text-input__prefixIcon--variant_outline {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-}
-
-.seed-text-input__prefixIcon--variant_outline:first-child {
+.seed-text-input__prefixText--variant_outline:first-child, .seed-text-input__prefixIcon--variant_outline:first-child {
   margin-inline-start: var(--seed-dimension-x4);
 }
 
-.seed-text-input__suffixText--variant_outline {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-}
-
-.seed-text-input__suffixText--variant_outline:last-child {
-  margin-inline-end: var(--seed-dimension-x4);
-}
-
-.seed-text-input__suffixIcon--variant_outline {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-}
-
-.seed-text-input__suffixIcon--variant_outline:last-child {
+.seed-text-input__suffixText--variant_outline:last-child, .seed-text-input__suffixIcon--variant_outline:last-child {
   margin-inline-end: var(--seed-dimension-x4);
 }
 
 .seed-text-input__root--variant_underline {
+  gap: var(--seed-dimension-x2_5);
   min-height: var(--seed-dimension-x10);
   box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
 }
@@ -7085,7 +7075,16 @@
   box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-critical-solid);
 }
 
-.seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder, .seed-text-input__prefixText--variant_underline {
+.seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder {
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
+}
+
+.seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])), .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-text-input__prefixText--variant_underline {
   font-size: var(--seed-font-size-t6);
   line-height: var(--seed-line-height-t6);
 }
@@ -7105,6 +7104,66 @@
   height: var(--seed-dimension-x6);
 }
 
+.seed-text-input__value--size_large:is(textarea) {
+  min-height: 95px;
+  padding-block: var(--seed-dimension-x3_5);
+}
+
+.seed-text-input__value--size_medium:is(textarea) {
+  min-height: 90px;
+  padding-block: 11px;
+}
+
+.seed-text-input__root--variant_outline-size_large {
+  gap: var(--seed-dimension-x2_5);
+  min-height: var(--seed-dimension-x13);
+}
+
+.seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder, .seed-text-input__prefixText--variant_outline-size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-text-input__prefixIcon--variant_outline-size_large {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+}
+
+.seed-text-input__suffixText--variant_outline-size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-text-input__suffixIcon--variant_outline-size_large {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+}
+
+.seed-text-input__root--variant_outline-size_medium {
+  gap: var(--seed-dimension-x1_5);
+  min-height: var(--seed-dimension-x10);
+}
+
+.seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder, .seed-text-input__prefixText--variant_outline-size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-text-input__prefixIcon--variant_outline-size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
+.seed-text-input__suffixText--variant_outline-size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-text-input__suffixIcon--variant_outline-size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
 .seed-toggle-button {
   box-sizing: border-box;
   cursor: pointer;