@seed-design/css 0.0.24 → 0.0.27

package/all.css

@@ -268,7 +268,7 @@
   --seed-color-palette-carrot-400: #ffb999;
   --seed-color-palette-carrot-500: #ff9364;
   --seed-color-palette-carrot-600: #f60;
-  --seed-color-palette-carrot-700: #e04f00;
+  --seed-color-palette-carrot-700: #e14d00;
   --seed-color-palette-carrot-800: #b93901;
   --seed-color-palette-carrot-900: #862b00;
   --seed-color-palette-carrot-1000: #471601;
@@ -431,7 +431,7 @@
   --seed-color-palette-carrot-1000: #f4eeea;
   --seed-color-palette-gray-00: #000;
   --seed-color-palette-gray-100: #16171b;
-  --seed-color-palette-gray-200: #22252b;
+  --seed-color-palette-gray-200: #1d2025;
   --seed-color-palette-gray-300: #2b2e35;
   --seed-color-palette-gray-400: #393d46;
   --seed-color-palette-gray-500: #5b606a;
@@ -577,6 +577,25 @@
   position: relative;
 }
 
+.seed-avatar__root:after {
+  content: "";
+  pointer-events: none;
+  border-radius: var(--seed-radius-full);
+  box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-on-image);
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+  -webkit-mask-composite: source-out;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+  position: absolute;
+  inset: 0;
+  mask-repeat: no-repeat;
+  mask-composite: subtract;
+}
+
 .seed-avatar__image {
   object-fit: cover;
   width: 100%;
@@ -639,6 +658,7 @@
 
 .seed-avatar__root--size_20 {
   --avatar-size: 20px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 0px;
   --badge-mask-offset: 0px;
 }
@@ -649,6 +669,7 @@
 
 .seed-avatar__root--size_24 {
   --avatar-size: 24px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 12px;
   --badge-mask-offset: 14px;
 }
@@ -660,6 +681,7 @@
 
 .seed-avatar__root--size_36 {
   --avatar-size: 36px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 18px;
   --badge-mask-offset: 20px;
 }
@@ -671,6 +693,7 @@
 
 .seed-avatar__root--size_42 {
   --avatar-size: 42px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 20px;
   --badge-mask-offset: 24px;
 }
@@ -682,6 +705,7 @@
 
 .seed-avatar__root--size_48 {
   --avatar-size: 48px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 22px;
   --badge-mask-offset: 28px;
 }
@@ -693,6 +717,7 @@
 
 .seed-avatar__root--size_64 {
   --avatar-size: 64px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 26px;
   --badge-mask-offset: 40px;
 }
@@ -704,6 +729,7 @@
 
 .seed-avatar__root--size_80 {
   --avatar-size: 80px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 32px;
   --badge-mask-offset: 52px;
 }
@@ -715,6 +741,7 @@
 
 .seed-avatar__root--size_96 {
   --avatar-size: 96px;
+  --avatar-stroke-width: 1px;
   --badge-mask-size: 38px;
   --badge-mask-offset: 62px;
 }
@@ -761,8 +788,8 @@
 }
 
 .seed-avatar-stack__item--size_20 {
-  clip-path: inset(-2px);
-  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
+  clip-path: inset(-1px);
+  box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
 }
 
 .seed-avatar-stack__item--size_24:not(:first-child) {
@@ -770,8 +797,8 @@
 }
 
 .seed-avatar-stack__item--size_24 {
-  clip-path: inset(-2px);
-  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
+  clip-path: inset(-1px);
+  box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
 }
 
 .seed-avatar-stack__item--size_36:not(:first-child) {
@@ -779,28 +806,55 @@
 }
 
 .seed-avatar-stack__item--size_36 {
-  clip-path: inset(-3px);
-  box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  clip-path: inset(-2px);
+  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
 }
 
-.seed-avatar-stack__item--size_48:not(:first-child) {
+.seed-avatar-stack__item--size_42:not(:first-child) {
   margin-left: -10px;
 }
 
+.seed-avatar-stack__item--size_42 {
+  clip-path: inset(-2px);
+  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
+}
+
+.seed-avatar-stack__item--size_48:not(:first-child) {
+  margin-left: -12px;
+}
+
 .seed-avatar-stack__item--size_48 {
-  clip-path: inset(-4px);
-  box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
+  clip-path: inset(-2px);
+  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
 }
 
 .seed-avatar-stack__item--size_64:not(:first-child) {
-  margin-left: -10px;
+  margin-left: -16px;
 }
 
 .seed-avatar-stack__item--size_64 {
+  clip-path: inset(-3px);
+  box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+}
+
+.seed-avatar-stack__item--size_80:not(:first-child) {
+  margin-left: -20px;
+}
+
+.seed-avatar-stack__item--size_80 {
   clip-path: inset(-4px);
   box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
 }
 
+.seed-avatar-stack__item--size_96:not(:first-child) {
+  margin-left: -24px;
+}
+
+.seed-avatar-stack__item--size_96 {
+  clip-path: inset(-5px);
+  box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
+}
+
 .seed-action-button {
   box-sizing: border-box;
   cursor: pointer;
@@ -3225,6 +3279,7 @@
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-bold);
+  flex-shrink: 0;
   margin-inline-end: 1ch;
 }