@seed-design/lynx-css 0.14.2 → 1.0.1

package/recipes/avatar.css

@@ -0,0 +1,257 @@
+.seed-avatar__root {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--seed-radius-full)
+}
+.seed-avatar__imageContainer {
+    background-image: linear-gradient(transparent, transparent);
+    clip-path: var(--avatar-badge-clip-none);
+    overflow: hidden;
+    width: 100%;
+    height: 100%
+}
+.seed-avatar__image {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--seed-radius-full);
+    overflow: hidden
+}
+.seed-avatar__pendingImageContainer {
+    pointer-events: none
+}
+.seed-avatar__pendingImage {
+    opacity: 0;
+    pointer-events: none
+}
+.seed-avatar__fallback {
+    background-image: linear-gradient(transparent, transparent);
+    clip-path: var(--avatar-badge-clip-none);
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--seed-radius-full)
+}
+.seed-avatar__stroke {
+    background-image: linear-gradient(transparent, transparent);
+    clip-path: var(--avatar-badge-clip-none);
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--seed-radius-full);
+    pointer-events: none
+}
+.seed-avatar__badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+.seed-avatar__imageContainer--badgeMask_circle {
+    clip-path: var(--avatar-badge-clip-circle)
+}
+.seed-avatar__fallback--badgeMask_circle {
+    clip-path: var(--avatar-badge-clip-circle)
+}
+.seed-avatar__stroke--badgeMask_circle {
+    clip-path: var(--avatar-badge-clip-circle)
+}
+.seed-avatar__badge--badgeMask_circle {
+    border-radius: 9999px
+}
+.seed-avatar__imageContainer--badgeMask_flower {
+    clip-path: var(--avatar-badge-clip-flower)
+}
+.seed-avatar__fallback--badgeMask_flower {
+    clip-path: var(--avatar-badge-clip-flower)
+}
+.seed-avatar__stroke--badgeMask_flower {
+    clip-path: var(--avatar-badge-clip-flower)
+}
+.seed-avatar__imageContainer--badgeMask_shield {
+    clip-path: var(--avatar-badge-clip-shield)
+}
+.seed-avatar__fallback--badgeMask_shield {
+    clip-path: var(--avatar-badge-clip-shield)
+}
+.seed-avatar__stroke--badgeMask_shield {
+    clip-path: var(--avatar-badge-clip-shield)
+}
+.seed-avatar__root--size_20 {
+    width: 20px;
+    height: 20px;
+    --avatar-badge-clip-none: path('M0 0H20V20H0Z');
+    --avatar-badge-clip-circle: path('M0 0H20V20H0Z');
+    --avatar-badge-clip-flower: path('M0 0H20V20H0Z');
+    --avatar-badge-clip-shield: path('M0 0H20V20H0Z')
+}
+.seed-avatar__stroke--size_20 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_20 {
+    display: none
+}
+.seed-avatar__root--size_24 {
+    width: 24px;
+    height: 24px;
+    --avatar-badge-clip-none: path('M0 0H24V24H0Z');
+    --avatar-badge-clip-circle: path('M0 0H26V26H0ZM26 20A6 6 0 1 0 14 20A6 6 0 1 0 26 20Z');
+    --avatar-badge-clip-flower: path('M0 0H26V26H0ZM25.21681 17C24.65334 16.03478 23.63075 15.50783 22.58727 15.53913C22.08639 14.6313 21.12639 14 19.99944 14C18.87249 14 17.91249 14.62087 17.41161 15.53913C16.37335 15.51304 15.35074 16.03478 14.78726 17C14.22378 17.96521 14.28639 19.11305 14.82378 20C14.28117 20.88695 14.22378 22.03479 14.78726 23C15.35074 23.96521 16.37335 24.49216 17.41683 24.46089C17.9177 25.36869 18.8777 26 20.00465 26C21.1316 26 22.0916 25.37911 22.59249 24.46089C23.63075 24.48695 24.65334 23.96521 25.21681 23C25.78029 22.03479 25.7177 20.88695 25.18029 20C25.72291 19.11305 25.78029 17.96521 25.21681 17Z');
+    --avatar-badge-clip-shield: path('M0 0V26H26V0ZM20.80138 25.79476C20.79391 25.7981 20.78536 25.80204 20.76991 25.80913C20.76725 25.81036 20.76335 25.81227 20.75829 25.81471C20.68558 25.84985 20.37346 26.00071 20.00004 26C19.6286 26.00075 19.32106 25.85281 19.24475 25.8161L19.19859 25.79476C19.07945 25.74144 18.91396 25.66471 18.71731 25.56635C18.32787 25.37157 17.79774 25.08275 17.25759 24.71285C16.72648 24.3491 16.12829 23.86828 15.64905 23.27461C15.17277 22.68463 14.72279 21.86727 14.72279 20.86921V16.9155C14.72279 16.25992 15.13262 15.67426 15.74854 15.44969L19.46551 14.0944C19.81074 13.96853 20.18926 13.96853 20.53445 14.0944L24.25145 15.44969C24.86735 15.67426 25.27719 16.25992 25.27719 16.9155V20.86921C25.27719 21.86727 24.82722 22.68463 24.35094 23.27461C23.87169 23.86828 23.27352 24.3491 22.74237 24.71285C22.20226 25.08275 21.67209 25.37157 21.28269 25.56635C21.08604 25.66471 20.92051 25.74148 20.80138 25.79476Z')
+}
+.seed-avatar__stroke--size_24 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_24 {
+    width: 10px;
+    height: 10px;
+    top: 15px;
+    left: 15px
+}
+.seed-avatar__root--size_36 {
+    width: 36px;
+    height: 36px;
+    --avatar-badge-clip-none: path('M0 0H36V36H0Z');
+    --avatar-badge-clip-circle: path('M0 0H38V38H0ZM38 29A9 9 0 1 0 20 29A9 9 0 1 0 38 29Z');
+    --avatar-badge-clip-flower: path('M0 0H38V38H0ZM36.82522 24.5C35.98001 23.05218 34.44612 22.26174 32.88091 22.3087C32.12958 20.94696 30.68958 20 28.99916 20C27.30873 20 25.86873 20.9313 25.11741 22.3087C23.56002 22.26956 22.02611 23.05218 21.18089 24.5C20.33567 25.94782 20.42959 27.66958 21.23567 29C20.42176 30.33043 20.33567 32.05218 21.18089 33.5C22.02611 34.94782 23.56002 35.73824 25.12524 35.69133C25.87655 37.05303 27.31655 38 29.00698 38C30.6974 38 32.1374 37.06867 32.88873 35.69133C34.44612 35.73042 35.98001 34.94782 36.82522 33.5C37.67043 32.05218 37.57655 30.33043 36.77043 29C37.58437 27.66958 37.67043 25.94782 36.82522 24.5Z');
+    --avatar-badge-clip-shield: path('M0 0V38H38V0ZM30.20206 37.69214C30.19087 37.69715 30.17804 37.70306 30.15487 37.71369C30.15087 37.71554 30.14502 37.71841 30.13743 37.72207C30.02836 37.77477 29.56019 38.00107 29.00006 38C28.4429 38.00113 27.98159 37.77922 27.86713 37.72415L27.79788 37.69214C27.61917 37.61216 27.37094 37.49707 27.07597 37.34952C26.49181 37.05736 25.69661 36.62412 24.88639 36.06927C24.08971 35.52365 23.19243 34.80241 22.47357 33.91192C21.75916 33.02694 21.08418 31.80091 21.08418 30.30382V24.37326C21.08418 23.38988 21.69892 22.51139 22.6228 22.17453L28.19827 20.1416C28.71611 19.9528 29.28389 19.9528 29.80167 20.1416L35.37718 22.17453C36.30102 22.51139 36.91578 23.38988 36.91578 24.37326V30.30382C36.91578 31.80091 36.24084 33.02694 35.52641 33.91192C34.80753 34.80241 33.91029 35.52365 33.11356 36.06927C32.30339 36.62412 31.50813 37.05736 30.92403 37.34952C30.62906 37.49707 30.38077 37.61221 30.20206 37.69214Z')
+}
+.seed-avatar__stroke--size_36 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_36 {
+    width: 14px;
+    height: 14px;
+    top: 22px;
+    left: 22px
+}
+.seed-avatar__root--size_42 {
+    width: 42px;
+    height: 42px;
+    --avatar-badge-clip-none: path('M0 0H42V42H0Z');
+    --avatar-badge-clip-circle: path('M0 0H44V44H0ZM44 34A10 10 0 1 0 24 34A10 10 0 1 0 44 34Z');
+    --avatar-badge-clip-flower: path('M0 0H44V44H0ZM42.69469 29C41.75556 27.39131 40.05125 26.51304 38.31213 26.56522C37.47731 25.05217 35.87731 24 33.99906 24C32.12081 24 30.52081 25.03478 29.68601 26.56522C27.95558 26.52174 26.25123 27.39131 25.3121 29C24.37297 30.60869 24.47732 32.52175 25.37297 34C24.46862 35.47825 24.37297 37.39131 25.3121 39C26.25123 40.60869 27.95558 41.48694 29.69471 41.43481C30.5295 42.94781 32.1295 44 34.00775 44C35.886 44 37.486 42.96519 38.32081 41.43481C40.05125 41.47825 41.75556 40.60869 42.69469 39C43.63381 37.39131 43.5295 35.47825 42.63381 34C43.53819 32.52175 43.63381 30.60869 42.69469 29Z');
+    --avatar-badge-clip-shield: path('M0 0V44H44V0ZM35.33563 43.65794C35.32319 43.6635 35.30894 43.67006 35.28319 43.68187C35.27875 43.68394 35.27225 43.68713 35.26381 43.69119C35.14262 43.74975 34.62244 44.00119 34.00006 44C33.381 44.00125 32.86844 43.75469 32.74125 43.6935L32.66431 43.65794C32.46575 43.56906 32.18994 43.44119 31.86219 43.27725C31.21312 42.95262 30.32956 42.47125 29.42932 41.85475C28.54413 41.2485 27.54714 40.44712 26.74841 39.45769C25.95462 38.47437 25.20464 37.11212 25.20464 35.44869V28.85918C25.20464 27.76653 25.88769 26.79044 26.91422 26.41614L33.10919 24.15733C33.68456 23.94756 34.31544 23.94756 34.89075 24.15733L41.08575 26.41614C42.11225 26.79044 42.79531 27.76654 42.79531 28.85918V35.44869C42.79531 37.11212 42.04537 38.47437 41.25156 39.45769C40.45281 40.44712 39.45587 41.2485 38.57062 41.85475C37.67044 42.47125 36.78681 42.95262 36.13781 43.27725C35.81006 43.44119 35.53419 43.56912 35.33563 43.65794Z')
+}
+.seed-avatar__stroke--size_42 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_42 {
+    width: 16px;
+    height: 16px;
+    top: 26px;
+    left: 26px
+}
+.seed-avatar__root--size_48 {
+    width: 48px;
+    height: 48px;
+    --avatar-badge-clip-none: path('M0 0H48V48H0Z');
+    --avatar-badge-clip-circle: path('M0 0H50V50H0ZM50 39A11 11 0 1 0 28 39A11 11 0 1 0 50 39Z');
+    --avatar-badge-clip-flower: path('M0 0H50V50H0ZM48.56416 33.5C47.53112 31.73044 45.65637 30.76435 43.74334 30.82174C42.82504 29.15739 41.06504 28 38.99897 28C36.93289 28 35.17289 29.13826 34.25461 30.82174C32.35114 30.77391 30.47635 31.73044 29.44331 33.5C28.41027 35.26956 28.52505 37.37392 29.51027 39C28.51549 40.62608 28.41027 42.73044 29.44331 44.5C30.47635 46.26956 32.35114 47.23563 34.26418 47.17829C35.18245 48.84259 36.94245 50 39.00852 50C41.0746 50 42.8346 48.86171 43.75289 47.17829C45.65637 47.22607 47.53112 46.26956 48.56416 44.5C49.59719 42.73044 49.48245 40.62608 48.49719 39C49.49201 37.37392 49.59719 35.26956 48.56416 33.5Z');
+    --avatar-badge-clip-shield: path('M0 0V50H50V0ZM40.46919 49.62373C40.45551 49.62985 40.43983 49.63707 40.41151 49.65006C40.40662 49.65233 40.39947 49.65584 40.39019 49.66031C40.25689 49.72472 39.68468 50.00131 39.00007 50C38.3191 50.00138 37.75528 49.73016 37.61538 49.66285L37.53074 49.62373C37.31233 49.52597 37.00893 49.38531 36.64841 49.20497C35.93444 48.84789 34.96252 48.31838 33.97225 47.64023C32.99854 46.97335 31.90186 46.09184 31.02325 45.00346C30.15008 43.92181 29.32511 42.42334 29.32511 40.59356V33.34509C29.32511 32.14318 30.07646 31.06948 31.20565 30.65776L38.02011 28.17306C38.65302 27.94231 39.34698 27.94231 39.97982 28.17306L46.79433 30.65776C47.92347 31.06948 48.67484 32.14319 48.67484 33.34509V40.59356C48.67484 42.42334 47.84991 43.92181 46.97672 45.00346C46.09809 46.09184 45.00146 46.97335 44.02769 47.64023C43.03748 48.31838 42.06549 48.84789 41.35159 49.20497C40.99107 49.38531 40.68761 49.52604 40.46919 49.62373Z')
+}
+.seed-avatar__stroke--size_48 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_48 {
+    width: 18px;
+    height: 18px;
+    top: 30px;
+    left: 30px
+}
+.seed-avatar__root--size_56 {
+    width: 56px;
+    height: 56px;
+    --avatar-badge-clip-none: path('M0 0H56V56H0Z');
+    --avatar-badge-clip-circle: path('M0 0H58V58H0ZM58 46A12 12 0 1 0 34 46A12 12 0 1 0 58 46Z');
+    --avatar-badge-clip-flower: path('M0 0H58V58H0ZM56.43362 40C55.30667 38.06957 53.2615 37.01565 51.17455 37.07826C50.17278 35.26261 48.25277 34 45.99887 34C43.74497 34 41.82498 35.24174 40.82321 37.07826C38.7467 37.02609 36.70148 38.06957 35.57452 40C34.44757 41.93042 34.57278 44.2261 35.64756 46C34.56235 47.7739 34.44757 50.06958 35.57452 52C36.70148 53.93042 38.7467 54.98432 40.83366 54.92177C41.8354 56.73738 43.7554 58 46.0093 58C48.2632 58 50.1832 56.75822 51.18498 54.92177C53.2615 54.9739 55.30667 53.93042 56.43362 52C57.56058 50.06958 57.4354 47.7739 56.36057 46C57.44582 44.2261 57.56058 41.93042 56.43362 40Z');
+    --avatar-badge-clip-shield: path('M0 0V58H58V0ZM47.60275 57.58953C47.58783 57.5962 47.57072 57.60408 47.53983 57.61825C47.5345 57.62073 47.5267 57.62455 47.51658 57.62942C47.37115 57.6997 46.74692 58.00142 46.00007 58C45.2572 58.0015 44.64213 57.70562 44.4895 57.6322L44.39718 57.58953C44.1589 57.48287 43.82793 57.32943 43.43462 57.1327C42.65575 56.74315 41.59548 56.1655 40.51518 55.4257C39.45295 54.6982 38.25657 53.73655 37.2981 52.54922C36.34554 51.36925 35.44557 49.73455 35.44557 47.73842V39.83101C35.44557 38.51984 36.26523 37.34853 37.49707 36.89937L44.93102 34.1888C45.62148 33.93707 46.37852 33.93707 47.0689 34.1888L54.5029 36.89937C55.7347 37.34853 56.55438 38.51985 56.55438 39.83101V47.73842C56.55438 49.73455 55.65445 51.36925 54.70188 52.54922C53.74338 53.73655 52.54705 54.6982 51.48475 55.4257C50.40452 56.1655 49.34417 56.74315 48.56538 57.1327C48.17207 57.32943 47.84103 57.48295 47.60275 57.58953Z')
+}
+.seed-avatar__stroke--size_56 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_56 {
+    width: 20px;
+    height: 20px;
+    top: 36px;
+    left: 36px
+}
+.seed-avatar__root--size_64 {
+    width: 64px;
+    height: 64px;
+    --avatar-badge-clip-none: path('M0 0H64V64H0Z');
+    --avatar-badge-clip-circle: path('M0 0H66V66H0ZM66 53A13 13 0 1 0 40 53A13 13 0 1 0 66 53Z');
+    --avatar-badge-clip-flower: path('M0 0H66V66H0ZM64.30309 46.5C63.08223 44.4087 60.86662 43.26696 58.60576 43.33478C57.52051 41.36783 55.44051 40 52.99878 40C50.55706 40 48.47706 41.34522 47.39182 43.33478C45.14226 43.27826 42.9266 44.4087 41.70573 46.5C40.48486 48.59129 40.62051 51.07827 41.78486 53C40.60921 54.92173 40.48486 57.40871 41.70573 59.5C42.9266 61.59129 45.14226 62.73302 47.40313 62.66526C48.48835 64.63216 50.56835 66 53.01008 66C55.4518 66 57.5318 64.65474 58.61706 62.66526C60.86662 62.72172 63.08223 61.59129 64.30309 59.5C65.52396 57.40871 65.38835 54.92173 64.22396 53C65.39964 51.07827 65.52396 48.59129 64.30309 46.5Z');
+    --avatar-badge-clip-shield: path('M0 0V66H66V0ZM54.73631 65.55532C54.72014 65.56255 54.70162 65.57108 54.66814 65.58644C54.66237 65.58912 54.65393 65.59326 54.64296 65.59854C54.48541 65.67468 53.80917 66.00154 53.00008 66C52.1953 66.00163 51.52897 65.68109 51.36362 65.60155L51.26361 65.55532C51.00547 65.43978 50.64692 65.27354 50.22084 65.06042C49.37706 64.63841 48.22843 64.01262 47.05811 63.21117C45.90736 62.42305 44.61129 61.38126 43.57294 60.09499C42.541 58.81669 41.56604 57.04576 41.56604 54.88329V46.31693C41.56604 44.89649 42.454 43.62757 43.78849 43.14099L51.84194 40.20453C52.58993 39.93182 53.41007 39.93182 54.15798 40.20453L62.21148 43.14099C63.54592 43.62757 64.43391 44.8965 64.43391 46.31693V54.88329C64.43391 57.04576 63.45899 58.81669 62.42703 60.09499C61.38866 61.38126 60.09264 62.42305 58.94181 63.21117C57.77157 64.01262 56.62286 64.63841 55.77916 65.06042C55.35308 65.27354 54.99444 65.43986 54.73631 65.55532Z')
+}
+.seed-avatar__stroke--size_64 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_64 {
+    width: 22px;
+    height: 22px;
+    top: 42px;
+    left: 42px
+}
+.seed-avatar__root--size_80 {
+    width: 80px;
+    height: 80px;
+    --avatar-badge-clip-none: path('M0 0H80V80H0Z');
+    --avatar-badge-clip-circle: path('M0 0H84V84H0ZM84 68A16 16 0 1 0 52 68A16 16 0 1 0 84 68Z');
+    --avatar-badge-clip-flower: path('M0 0H84V84H0ZM81.9115 60C80.4089 57.42609 77.682 56.02087 74.8994 56.10435C73.5637 53.68348 71.0037 52 67.9985 52C64.9933 52 62.4333 53.65565 61.09762 56.10435C58.32893 56.03478 55.60197 57.42609 54.09936 60C52.59675 62.5739 52.76371 65.6348 54.19675 68C52.7498 70.3652 52.59675 73.4261 54.09936 76C55.60197 78.5739 58.32893 79.9791 61.11154 79.8957C62.4472 82.3165 65.0072 84 68.0124 84C71.0176 84 73.5776 82.3443 74.9133 79.8957C77.682 79.9652 80.4089 78.5739 81.9115 76C83.4141 73.4261 83.2472 70.3652 81.8141 68C83.2611 65.6348 83.4141 62.5739 81.9115 60Z');
+    --avatar-badge-clip-shield: path('M0 0V84H84V0ZM70.137 83.4527C70.1171 83.4616 70.0943 83.4721 70.0531 83.491C70.046 83.4943 70.0356 83.4994 70.0221 83.5059C69.8282 83.5996 68.9959 84.0019 68.0001 84C67.0096 84.002 66.1895 83.6075 65.986 83.5096L65.8629 83.4527C65.5452 83.3105 65.1039 83.1059 64.5795 82.8436C63.541 82.3242 62.1273 81.554 60.68691 80.5676C59.2706 79.5976 57.67543 78.3154 56.39746 76.7323C55.12739 75.159 53.92743 72.9794 53.92743 70.3179V59.77468C53.92743 58.02645 55.02031 56.4647 56.66276 55.86583L66.5747 52.25173C67.4953 51.91609 68.5047 51.91609 69.4252 52.25173L79.3372 55.86583C80.9796 56.4647 82.0725 58.02646 82.0725 59.77468V70.3179C82.0725 72.9794 80.8726 75.159 79.6025 76.7323C78.3245 78.3154 76.7294 79.5976 75.313 80.5676C73.8727 81.554 72.4589 82.3242 71.4205 82.8436C70.8961 83.1059 70.4547 83.3106 70.137 83.4527Z')
+}
+.seed-avatar__stroke--size_80 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_80 {
+    width: 28px;
+    height: 28px;
+    top: 54px;
+    left: 54px
+}
+.seed-avatar__root--size_96 {
+    width: 96px;
+    height: 96px;
+    --avatar-badge-clip-none: path('M0 0H96V96H0Z');
+    --avatar-badge-clip-circle: path('M0 0H100V100H0ZM100 81A19 19 0 1 0 62 81A19 19 0 1 0 100 81Z');
+    --avatar-badge-clip-flower: path('M0 0H100V100H0ZM97.51991 71.5C95.73557 68.44348 92.49738 66.77478 89.19304 66.87392C87.60689 63.99913 84.56689 62 80.99822 62C77.42954 62 74.38954 63.96608 72.80342 66.87392C69.5156 66.7913 66.27734 68.44348 64.49299 71.5C62.70865 74.55651 62.90691 78.19133 64.60864 81C62.89038 83.80867 62.70865 87.44349 64.49299 90.5C66.27734 93.55651 69.5156 95.22518 72.81995 95.12614C74.40605 98.00084 77.44605 100 81.01472 100C84.5834 100 87.6234 98.03386 89.20954 95.12614C92.49738 95.20867 95.73557 93.55651 97.51991 90.5C99.30424 87.44349 99.10605 83.80867 97.40424 81C99.12256 78.19133 99.30424 74.55651 97.51991 71.5Z');
+    --avatar-badge-clip-shield: path('M0 0V100H100V0ZM83.53769 99.35008C83.51406 99.36065 83.48698 99.37312 83.43806 99.39556C83.42963 99.39948 83.41728 99.40554 83.40124 99.41326C83.17099 99.52452 82.18263 100.00226 81.00012 100C79.8239 100.00238 78.85003 99.53391 78.60837 99.41765L78.46219 99.35008C78.08492 99.18122 77.56088 98.93826 76.93816 98.62677C75.70494 98.00999 74.02617 97.09537 72.31571 95.92403C70.63384 94.77215 68.73957 93.24954 67.22198 91.36961C65.71378 89.50131 64.28882 86.91304 64.28882 83.75251V71.23243C64.28882 69.15641 65.58662 67.30183 67.53703 66.59067L79.30746 62.29893C80.40067 61.90036 81.59933 61.90036 82.69243 62.29893L94.46292 66.59067C96.41327 67.30183 97.71109 69.15642 97.71109 71.23243V83.75251C97.71109 86.91304 96.28621 89.50131 94.77797 91.36961C93.26034 93.24954 91.36616 94.77215 89.68419 95.92403C87.97383 97.09537 86.29494 98.00999 85.06184 98.62677C84.43912 98.93826 83.91496 99.18134 83.53769 99.35008Z')
+}
+.seed-avatar__stroke--size_96 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_96 {
+    width: 32px;
+    height: 32px;
+    top: 65px;
+    left: 65px
+}
+.seed-avatar__root--size_108 {
+    width: 108px;
+    height: 108px;
+    --avatar-badge-clip-none: path('M0 0H108V108H0Z');
+    --avatar-badge-clip-circle: path('M0 0H114V114H0ZM114 92A22 22 0 1 0 70 92A22 22 0 1 0 114 92Z');
+    --avatar-badge-clip-flower: path('M0 0H114V114H0ZM111.12831 81C109.06224 77.46087 105.31275 75.5287 101.48667 75.64348C99.65009 72.31479 96.13009 70 91.99794 70C87.86579 70 84.34579 72.27652 82.50923 75.64348C78.70228 75.54782 74.95271 77.46087 72.88662 81C70.82054 84.53911 71.0501 88.74785 73.02053 92C71.03097 95.25215 70.82054 99.46089 72.88662 103C74.95271 106.53911 78.70228 108.47126 82.52837 108.35659C84.3649 111.68519 87.8849 114 92.01705 114C96.1492 114 99.6692 111.72341 101.50579 108.35659C105.31275 108.45215 109.06224 106.53911 111.12831 103C113.19439 99.46089 112.9649 95.25215 110.99439 92C112.98401 88.74785 113.19439 84.53911 111.12831 81Z');
+    --avatar-badge-clip-shield: path('M0 0V114H114V0ZM94.93838 113.24746C94.91101 113.2597 94.87966 113.27414 94.82301 113.30013C94.81325 113.30466 94.79895 113.31168 94.78039 113.32061C94.51377 113.44945 93.36936 114.00261 92.00014 114C90.6382 114.00275 89.51056 113.46031 89.23075 113.3257L89.06149 113.24746C88.62465 113.05194 88.01786 112.77061 87.29681 112.40995C85.86888 111.69577 83.92504 110.63675 81.9445 109.28045C79.99707 107.9467 77.80372 106.18367 76.04651 104.00691C74.30016 101.84363 72.65022 98.84668 72.65022 95.18711V80.69018C72.65022 78.28637 74.15293 76.13896 76.41129 75.31552L90.04021 70.34613C91.30604 69.88462 92.69396 69.88462 93.95965 70.34613L107.58865 75.31552C109.84695 76.13896 111.34969 78.28638 111.34969 80.69018V95.18711C111.34969 98.84668 109.69983 101.84363 107.95344 104.00691C106.19619 106.18367 104.00293 107.9467 102.05537 109.28045C100.07496 110.63675 98.13099 111.69577 96.70319 112.40995C95.98214 112.77061 95.37521 113.05208 94.93838 113.24746Z')
+}
+.seed-avatar__stroke--size_108 {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-avatar__badge--size_108 {
+    width: 36px;
+    height: 36px;
+    top: 74px;
+    left: 74px
+}

package/recipes/avatar.d.ts

@@ -0,0 +1,28 @@
+declare interface AvatarVariant {
+  /**
+  * @default "none"
+  */
+  badgeMask: "none" | "circle" | "flower" | "shield";
+/**
+  * @default 48
+  */
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
+}
+
+declare type AvatarVariantMap = {
+  [key in keyof AvatarVariant]: Array<AvatarVariant[key]>;
+};
+
+export declare type AvatarVariantProps = Partial<AvatarVariant>;
+
+export declare type AvatarSlotName = "root" | "imageContainer" | "pendingImageContainer" | "image" | "pendingImage" | "fallback" | "badge" | "stroke";
+
+export declare const avatarVariantMap: AvatarVariantMap;
+
+export declare const avatar: ((
+  props?: AvatarVariantProps,
+) => Record<AvatarSlotName, string>) & {
+  splitVariantProps: <T extends AvatarVariantProps>(
+    props: T,
+  ) => [AvatarVariantProps, Omit<T, keyof AvatarVariantProps>];
+}

package/recipes/avatar.mjs

@@ -0,0 +1,82 @@
+import './avatar.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "imageContainer",
+    "seed-avatar__imageContainer"
+  ],
+  [
+    "pendingImageContainer",
+    "seed-avatar__pendingImageContainer"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "pendingImage",
+    "seed-avatar__pendingImage"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ],
+  [
+    "stroke",
+    "seed-avatar__stroke"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48,
+  "badgeMask": "none"
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "badgeMask": [
+    "none",
+    "circle",
+    "flower",
+    "shield"
+  ],
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "56",
+    "64",
+    "80",
+    "96",
+    "108"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
+
+// @recipe(seed): avatar

package/recipes/badge.css

@@ -2,6 +2,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    --seed-badge-stroke-width: 0px;
+    border-width: var(--seed-badge-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     min-width: 0;
     flex-shrink: 1;
     overflow: hidden;
@@ -32,16 +36,14 @@
     justify-content: center;
     color: inherit;
     --seed-icon-size: 100%;
-    --seed-icon-color: currentColor;
-    transform: scale(1);
-    transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+    --seed-icon-color: currentColor
 }
 .seed-badge__root--size_medium {
     min-height: var(--seed-dimension-x5);
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5);
-    padding-top: var(--seed-dimension-x0_5);
-    padding-bottom: var(--seed-dimension-x0_5);
+    padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
+    padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
+    padding-top: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
     border-radius: var(--seed-radius-r1);
     gap: var(--seed-dimension-x0_5)
 }
@@ -59,10 +61,10 @@
 }
 .seed-badge__root--size_large {
     min-height: var(--seed-dimension-x6);
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x1);
+    padding-left: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
+    padding-top: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
     border-radius: var(--seed-radius-r1_5);
     gap: var(--seed-dimension-x0_5)
 }
@@ -84,6 +86,9 @@
 .seed-badge__label--variant_solid {
     font-weight: var(--seed-font-weight-bold)
 }
+.seed-badge__root--variant_outline {
+    --seed-badge-stroke-width: 1px
+}
 .seed-badge__label--variant_outline {
     font-weight: var(--seed-font-weight-bold)
 }
@@ -102,7 +107,7 @@
     color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-badge__root--tone_neutral-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-color: var(--seed-color-stroke-neutral-muted);
     color: var(--seed-color-fg-neutral-muted)
 }
 .seed-badge__label--tone_neutral-variant_outline {
@@ -123,7 +128,7 @@
     color: var(--seed-color-fg-on-brand-solid)
 }
 .seed-badge__root--tone_brand-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    border-color: var(--seed-color-stroke-brand-weak);
     color: var(--seed-color-fg-brand)
 }
 .seed-badge__label--tone_brand-variant_outline {
@@ -144,7 +149,7 @@
     color: var(--seed-color-fg-on-informative-solid)
 }
 .seed-badge__root--tone_informative-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
+    border-color: var(--seed-color-stroke-informative-weak);
     color: var(--seed-color-fg-informative)
 }
 .seed-badge__label--tone_informative-variant_outline {
@@ -165,7 +170,7 @@
     color: var(--seed-color-fg-on-positive-solid)
 }
 .seed-badge__root--tone_positive-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
+    border-color: var(--seed-color-stroke-positive-weak);
     color: var(--seed-color-fg-positive)
 }
 .seed-badge__label--tone_positive-variant_outline {
@@ -186,7 +191,7 @@
     color: var(--seed-color-fg-on-warning-solid)
 }
 .seed-badge__root--tone_warning-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
+    border-color: var(--seed-color-stroke-warning-weak);
     color: var(--seed-color-fg-warning)
 }
 .seed-badge__label--tone_warning-variant_outline {
@@ -207,15 +212,9 @@
     color: var(--seed-color-fg-on-critical-solid)
 }
 .seed-badge__root--tone_critical-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
+    border-color: var(--seed-color-stroke-critical-weak);
     color: var(--seed-color-fg-critical)
 }
 .seed-badge__label--tone_critical-variant_outline {
     color: var(--seed-color-fg-critical)
-}
-.seed-badge__action--size_medium-pressed_true {
-    transform: scale(var(--seed-scale-s95))
-}
-.seed-badge__action--size_large-pressed_true {
-    transform: scale(var(--seed-scale-s95))
 }

package/recipes/badge.d.ts

@@ -11,10 +11,6 @@ declare interface BadgeVariant {
   * @default "neutral"
   */
   tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";
-/**
-  * @default false
-  */
-  pressed: boolean;
 }
 
 declare type BadgeVariantMap = {

package/recipes/badge.mjs

@@ -23,8 +23,7 @@ const badgeSlotNames = [
 const defaultVariant = {
   "size": "medium",
   "variant": "solid",
-  "tone": "neutral",
-  "pressed": false
+  "tone": "neutral"
 };
 
 const compoundVariants = [
@@ -99,14 +98,6 @@ const compoundVariants = [
   {
     "tone": "critical",
     "variant": "outline"
-  },
-  {
-    "size": "medium",
-    "pressed": true
-  },
-  {
-    "size": "large",
-    "pressed": true
   }
 ];
 
@@ -127,10 +118,6 @@ export const badgeVariantMap = {
     "positive",
     "warning",
     "critical"
-  ],
-  "pressed": [
-    true,
-    false
   ]
 };
 

package/recipes/bottom-sheet.css

@@ -35,6 +35,7 @@
 .seed-bottom-sheet__header {
     display: flex;
     flex-direction: column;
+    flex-shrink: 0;
     gap: var(--seed-dimension-x2);
     padding-top: var(--seed-dimension-x6);
     padding-bottom: var(--seed-dimension-x4)
@@ -58,14 +59,24 @@
 .seed-bottom-sheet__body {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex-shrink: 1;
     min-height: 0;
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
+.seed-bottom-sheet__scrollArea {
+    width: 100%;
+    flex-shrink: 1;
+    min-height: 0
+}
+.seed-bottom-sheet__scrollContent {
+    display: flex;
+    flex-direction: column
+}
 .seed-bottom-sheet__footer {
     display: flex;
     flex-direction: column;
+    flex-shrink: 0;
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--seed-dimension-x3);
@@ -75,7 +86,19 @@
     position: absolute;
     display: flex;
     justify-content: center;
-    align-items: center
+    align-items: center;
+    top: var(--seed-dimension-x6);
+    right: var(--seed-dimension-x4);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-bg-neutral-weak)
+}
+.seed-bottom-sheet__closeButtonIcon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--seed-color-fg-neutral)
 }
 .seed-bottom-sheet__header--headerAlign_left {
     justify-content: flex-start
@@ -91,4 +114,12 @@
 .seed-bottom-sheet__title--headerAlign_center {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter)
+}
+.seed-bottom-sheet__title--headerAlign_left-closeButton_true {
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: 56px
+}
+.seed-bottom-sheet__title--headerAlign_center-closeButton_true {
+    padding-left: 56px;
+    padding-right: 56px
 }

package/recipes/bottom-sheet.d.ts

@@ -7,6 +7,10 @@ declare interface BottomSheetVariant {
   * @default false
   */
   skipAnimation: boolean;
+/**
+  * @default false
+  */
+  closeButton: boolean;
 }
 
 declare type BottomSheetVariantMap = {
@@ -15,7 +19,7 @@ declare type BottomSheetVariantMap = {
 
 export declare type BottomSheetVariantProps = Partial<BottomSheetVariant>;
 
-export declare type BottomSheetSlotName = "positioner" | "backdrop" | "content" | "header" | "body" | "footer" | "title" | "description" | "closeButton";
+export declare type BottomSheetSlotName = "positioner" | "backdrop" | "content" | "header" | "body" | "scrollArea" | "scrollContent" | "footer" | "title" | "description" | "closeButton" | "closeButtonIcon";
 
 export declare const bottomSheetVariantMap: BottomSheetVariantMap;