@seed-design/css 0.1.14 → 0.2.0

package/all.css

@@ -19,6 +19,15 @@
 
 :root {
   --seed-font-size-multiplier: 1;
+  --seed-font-size-limit-min: .8;
+  --seed-font-size-limit-max: 1.5;
+  --seed-line-height-limit-min: .8;
+  --seed-line-height-limit-max: 1.5;
+}
+
+[data-seed-platform="ios"] {
+  --seed-font-size-limit-max: 1.35;
+  --seed-line-height-limit-max: 1.35;
 }
 
 @supports (font: -apple-system-body) {
@@ -49,20 +58,23 @@
 .seed-prefix-icon {
   width: var(--seed-prefix-icon-size);
   height: var(--seed-prefix-icon-size);
+  color: var(--seed-prefix-icon-color, currentColor);
   margin-left: var(--seed-prefix-icon-margin-left);
   margin-right: var(--seed-prefix-icon-margin-right);
   margin-top: var(--seed-prefix-icon-margin-top);
-  color: var(--seed-prefix-icon-color, currentColor);
+  align-self: var(--seed-prefix-icon-align-self);
+  justify-self: var(--seed-prefix-icon-justify-self);
 }
 
 .seed-suffix-icon {
   width: var(--seed-suffix-icon-size);
   height: var(--seed-suffix-icon-size);
+  color: var(--seed-suffix-icon-color, currentColor);
   margin-left: var(--seed-suffix-icon-margin-left);
   margin-right: var(--seed-suffix-icon-margin-right);
   margin-top: var(--seed-suffix-icon-margin-top);
-  margin-bottom: var(--seed-suffix-icon-margin-bottom);
-  color: var(--seed-suffix-icon-color, currentColor);
+  align-self: var(--seed-suffix-icon-align-self);
+  justify-self: var(--seed-suffix-icon-justify-self);
 }
 
 .seed-count {
@@ -235,32 +247,49 @@
   --seed-duration-d4: .2s;
   --seed-duration-d5: .25s;
   --seed-duration-d6: .3s;
-  --seed-font-size-t1: clamp(8.8px, calc(.6875rem * var(--seed-font-size-multiplier)), 13.98px);
-  --seed-font-size-t2: clamp(9.6px, calc(.75rem * var(--seed-font-size-multiplier)), 15.25px);
-  --seed-font-size-t3: clamp(10.4px, calc(.8125rem * var(--seed-font-size-multiplier)), 16.52px);
-  --seed-font-size-t4: clamp(11.2px, calc(.875rem * var(--seed-font-size-multiplier)), 17.79px);
-  --seed-font-size-t5: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
-  --seed-font-size-t6: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
-  --seed-font-size-t7: clamp(16px, calc(1.25rem * var(--seed-font-size-multiplier)), 25.41px);
-  --seed-font-size-t8: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
-  --seed-font-size-t9: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
-  --seed-font-size-t10: clamp(20.8px, calc(1.625rem * var(--seed-font-size-multiplier)), 33.04px);
+  --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, .8)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, .8)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, .8)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, .8)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, .8)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
+  --seed-font-size-t1-static: 11px;
   --seed-font-size-t2-static: 12px;
+  --seed-font-size-t3-static: 13px;
+  --seed-font-size-t4-static: 14px;
   --seed-font-size-t5-static: 16px;
   --seed-font-size-t6-static: 18px;
+  --seed-font-size-t7-static: 20px;
+  --seed-font-size-t8-static: 22px;
+  --seed-font-size-t9-static: 24px;
+  --seed-font-size-t10-static: 26px;
   --seed-font-weight-regular: 400;
   --seed-font-weight-medium: 500;
   --seed-font-weight-bold: 700;
-  --seed-line-height-t1: clamp(12px, calc(.9375rem * var(--seed-font-size-multiplier)), 19.06px);
-  --seed-line-height-t2: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
-  --seed-line-height-t3: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
-  --seed-line-height-t4: clamp(15.2px, calc(1.1875rem * var(--seed-font-size-multiplier)), 24.14px);
-  --seed-line-height-t5: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
-  --seed-line-height-t6: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
-  --seed-line-height-t7: clamp(21.6px, calc(1.6875rem * var(--seed-font-size-multiplier)), 34.31px);
-  --seed-line-height-t8: clamp(24px, calc(1.875rem * var(--seed-font-size-multiplier)), 38.12px);
-  --seed-line-height-t9: clamp(25.6px, calc(2rem * var(--seed-font-size-multiplier)), 40.66px);
-  --seed-line-height-t10: clamp(28px, calc(2.1875rem * var(--seed-font-size-multiplier)), 44.47px);
+  --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, .8)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, .8)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, .8)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
+  --seed-line-height-t1-static: 15px;
+  --seed-line-height-t2-static: 16px;
+  --seed-line-height-t3-static: 18px;
+  --seed-line-height-t4-static: 19px;
+  --seed-line-height-t5-static: 22px;
+  --seed-line-height-t6-static: 24px;
+  --seed-line-height-t7-static: 27px;
+  --seed-line-height-t8-static: 30px;
+  --seed-line-height-t9-static: 32px;
+  --seed-line-height-t10-static: 35px;
   --seed-radius-r0_5: 2px;
   --seed-radius-r1: 4px;
   --seed-radius-r1_5: 6px;
@@ -376,13 +405,13 @@
   --seed-color-palette-yellow-900: #4f3e1f;
   --seed-color-palette-yellow-1000: #2c2512;
   --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
+  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
+  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-brand: var(--seed-color-palette-carrot-600);
+  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
   --seed-color-fg-critical: var(--seed-color-palette-red-700);
   --seed-color-fg-positive: var(--seed-color-palette-green-700);
   --seed-color-fg-warning: var(--seed-color-palette-yellow-700);
-  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
-  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
-  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
   --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
   --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
@@ -428,17 +457,21 @@
   --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
   --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-400);
   --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
-  --seed-color-stroke-neutral: var(--seed-color-palette-static-black-alpha-300);
-  --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
-  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
-  --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
-  --seed-color-stroke-warning: var(--seed-color-palette-yellow-300);
-  --seed-color-stroke-critical: var(--seed-color-palette-red-300);
-  --seed-color-stroke-field: var(--seed-color-palette-gray-400);
-  --seed-color-stroke-control: var(--seed-color-palette-gray-400);
-  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
-  --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-black-alpha-200);
-  --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
+  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
+  --seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
+  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
+  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
+  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
+  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
+  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
+  --seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
+  --seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
+  --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-black-alpha-300);
+  --seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-black-alpha-200);
+  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
+  --seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
+  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
+  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
   --seed-color-manner-temp-l1-text: #62666a;
   --seed-color-manner-temp-l2-text: #2592f7;
   --seed-color-manner-temp-l3-text: #0099c8;
@@ -557,13 +590,13 @@
   --seed-color-palette-yellow-900: #e5d49b;
   --seed-color-palette-yellow-1000: #f7f0cd;
   --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
+  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
+  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-brand: var(--seed-color-palette-carrot-700);
+  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
   --seed-color-fg-critical: var(--seed-color-palette-red-700);
   --seed-color-fg-positive: var(--seed-color-palette-green-700);
   --seed-color-fg-warning: var(--seed-color-palette-yellow-700);
-  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
-  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
-  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
   --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
   --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
@@ -609,17 +642,21 @@
   --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-600);
   --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-700);
   --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
-  --seed-color-stroke-neutral: var(--seed-color-palette-static-white-alpha-100);
-  --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
-  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
-  --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
-  --seed-color-stroke-warning: var(--seed-color-palette-yellow-300);
-  --seed-color-stroke-critical: var(--seed-color-palette-red-300);
-  --seed-color-stroke-field: var(--seed-color-palette-gray-400);
-  --seed-color-stroke-control: var(--seed-color-palette-gray-400);
-  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
-  --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-white-alpha-50);
-  --seed-color-stroke-on-image: var(--seed-color-palette-static-white-alpha-50);
+  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
+  --seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
+  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
+  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
+  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
+  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
+  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
+  --seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
+  --seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
+  --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-white-alpha-100);
+  --seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-white-alpha-50);
+  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
+  --seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
+  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
+  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
   --seed-color-manner-temp-l1-text: #b1b5b9;
   --seed-color-manner-temp-l2-text: #7cbaf4;
   --seed-color-manner-temp-l3-text: #47c3eb;
@@ -801,7 +838,7 @@
   background: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-neutral);
+  border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-brand);
   --seed-prefix-icon-color: var(--seed-color-fg-brand);
   --seed-suffix-icon-color: var(--seed-color-fg-brand);
@@ -816,7 +853,7 @@
 
 .seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
   background: var(--seed-color-bg-layer-default);
-  border-color: var(--seed-color-stroke-neutral);
+  border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-disabled);
   --seed-prefix-icon-color: var(--seed-color-fg-disabled);
   --seed-suffix-icon-color: var(--seed-color-fg-disabled);
@@ -831,7 +868,7 @@
   background: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-neutral);
+  border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
   --seed-prefix-icon-color: var(--seed-color-fg-neutral);
   --seed-suffix-icon-color: var(--seed-color-fg-neutral);
@@ -846,7 +883,7 @@
 
 .seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
   background: var(--seed-color-bg-layer-default);
-  border-color: var(--seed-color-stroke-neutral);
+  border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-disabled);
   --seed-prefix-icon-color: var(--seed-color-fg-disabled);
   --seed-suffix-icon-color: var(--seed-color-fg-disabled);
@@ -1167,7 +1204,7 @@
   content: "";
   left: var(--seed-dimension-spacing-x-global-gutter);
   right: var(--seed-dimension-spacing-x-global-gutter);
-  background: var(--seed-color-stroke-neutral);
+  background: var(--seed-color-stroke-neutral-muted);
   height: 1px;
   display: block;
   position: absolute;
@@ -1234,7 +1271,7 @@
   content: "";
   left: var(--seed-dimension-spacing-x-global-gutter);
   right: var(--seed-dimension-spacing-x-global-gutter);
-  background: var(--seed-color-stroke-neutral);
+  background: var(--seed-color-stroke-neutral-muted);
   height: 1px;
   display: block;
   position: absolute;
@@ -1471,7 +1508,7 @@
 }
 
 .seed-app-bar__root--divider_true:before {
-  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
+  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
 }
 
 .seed-app-bar-main__root {
@@ -1861,7 +1898,7 @@
   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);
+  box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
   -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);
@@ -2212,7 +2249,7 @@
 }
 
 .seed-badge__root--tone_neutral-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral-muted);
 }
 
@@ -2227,7 +2264,7 @@
 }
 
 .seed-badge__root--tone_brand-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
   color: var(--seed-color-fg-brand);
 }
 
@@ -2242,7 +2279,7 @@
 }
 
 .seed-badge__root--tone_informative-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
   color: var(--seed-color-fg-informative);
 }
 
@@ -2257,7 +2294,7 @@
 }
 
 .seed-badge__root--tone_positive-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
   color: var(--seed-color-fg-positive);
 }
 
@@ -2272,7 +2309,7 @@
 }
 
 .seed-badge__root--tone_warning-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
   color: var(--seed-color-fg-warning);
 }
 
@@ -2287,7 +2324,7 @@
 }
 
 .seed-badge__root--tone_critical-variant_outline {
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
   color: var(--seed-color-fg-critical);
 }
 
@@ -2642,7 +2679,7 @@
 .seed-checkbox__control--variant_square {
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-control);
+  border-color: var(--seed-color-stroke-neutral-weak);
 }
 
 .seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -2660,7 +2697,7 @@
 
 .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
   background: var(--seed-color-bg-disabled);
-  border-color: var(--seed-color-stroke-neutral);
+  border-color: var(--seed-color-stroke-neutral-muted);
 }
 
 .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
@@ -2863,7 +2900,7 @@
 
 .seed-chip__root--variant_outlineStrong {
   background: var(--seed-color-bg-layer-default);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
 }
 
@@ -2895,27 +2932,27 @@
 
 .seed-chip__root--variant_outlineWeak {
   background: var(--seed-color-bg-layer-default);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
 }
 
 .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
   background: var(--seed-color-bg-layer-default-pressed);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
   --seed-icon-color: var(--seed-color-fg-neutral);
 }
 
 .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
   background: var(--seed-color-bg-neutral-weak);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
   color: var(--seed-color-fg-neutral);
   --seed-icon-color: var(--seed-color-fg-neutral);
 }
 
 .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
   background: var(--seed-color-bg-neutral-weak-pressed);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
   color: var(--seed-color-fg-neutral);
   --seed-icon-color: var(--seed-color-fg-neutral);
 }
@@ -3263,7 +3300,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: var(--seed-radius-full);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
   line-height: 1;
   font-weight: var(--seed-font-weight-medium);
@@ -3599,7 +3636,7 @@
   justify-content: flex-start;
   align-items: center;
   gap: var(--seed-dimension-x3_5);
-  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
@@ -3943,8 +3980,7 @@
   --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
-  --seed-suffix-icon-margin-top: auto;
-  --seed-suffix-icon-margin-bottom: auto;
+  --seed-suffix-icon-align-self: center;
   border: none;
   align-items: flex-start;
   font-family: inherit;
@@ -4360,7 +4396,7 @@
   padding-block: var(--seed-dimension-x3_5);
   align-items: center;
   gap: var(--seed-dimension-x3_5);
-  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
@@ -4475,8 +4511,7 @@
   --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-margin-left: var(--seed-dimension-x2);
-  --seed-suffix-icon-margin-top: auto;
-  --seed-suffix-icon-margin-bottom: auto;
+  --seed-suffix-icon-align-self: center;
   border: none;
   align-items: flex-start;
   font-family: inherit;
@@ -4760,7 +4795,7 @@
   background-color: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-control);
+  border-color: var(--seed-color-stroke-neutral-weak);
   border-radius: var(--seed-radius-full);
   flex: none;
   justify-content: center;
@@ -4874,7 +4909,7 @@
 .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
   background: var(--seed-color-bg-layer-default);
   color: var(--seed-color-fg-brand);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
   --seed-prefix-icon-color: var(--seed-color-fg-brand);
   --seed-count-color: var(--seed-color-fg-brand);
 }
@@ -4887,7 +4922,7 @@
   cursor: not-allowed;
   background: var(--seed-color-bg-disabled);
   color: var(--seed-color-fg-disabled);
-  box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand);
+  box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
   --seed-prefix-icon-color: var(--seed-color-fg-disabled);
   --seed-count-color: var(--seed-color-fg-disabled);
 }
@@ -4898,7 +4933,7 @@
 
 .seed-reaction-button:is([aria-pressed="true"], [data-pressed])[data-loading] {
   background: var(--seed-color-bg-layer-default-pressed);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
   --track-color: var(--seed-color-palette-carrot-200);
   --range-color: var(--seed-color-fg-brand);
 }
@@ -5003,7 +5038,7 @@
   padding-inline: var(--seed-dimension-x4);
   padding-block: var(--seed-dimension-x5);
   border-radius: var(--seed-radius-r3);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   display: flex;
 }
 
@@ -5013,7 +5048,7 @@
 
 .seed-select-box__root:is(:checked, [data-checked]) {
   background-color: var(--seed-color-bg-neutral-weak);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-control);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
 
 .seed-select-box__root:is(:checked, [data-checked]):is(:active, [data-active]) {
@@ -5034,7 +5069,7 @@
   background-color: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-control);
+  border-color: var(--seed-color-stroke-neutral-weak);
   border-radius: var(--seed-radius-r1);
   flex: none;
   justify-content: center;
@@ -5073,7 +5108,7 @@
   background-color: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-control);
+  border-color: var(--seed-color-stroke-neutral-weak);
   border-radius: var(--seed-radius-full);
   flex: none;
   justify-content: center;
@@ -5187,6 +5222,7 @@
   background: var(--seed-color-bg-neutral-solid);
   border-radius: var(--seed-radius-r2);
   width: 100%;
+  max-width: 560px;
   padding-inline: var(--seed-dimension-x4);
   padding-block: var(--seed-dimension-x2_5);
   justify-content: space-between;
@@ -5440,7 +5476,7 @@
 
 .seed-tabs__list {
   background: var(--seed-color-bg-layer-default);
-  box-shadow: inset 0 -1px var(--seed-color-stroke-neutral);
+  box-shadow: inset 0 -1px var(--seed-color-stroke-neutral-muted);
 }
 
 .seed-tabs__carousel {
@@ -5837,19 +5873,19 @@
   background-color: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--seed-color-stroke-field);
+  border-color: var(--seed-color-stroke-neutral-weak);
   align-items: center;
   display: flex;
   overflow: hidden;
 }
 
 .seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
-  border-color: var(--seed-color-stroke-field-focused);
+  border-color: var(--seed-color-stroke-neutral-contrast);
 }
 
 .seed-text-field__field:is(:invalid, [data-invalid]) {
   background-color: var(--seed-color-bg-critical-weak);
-  border-color: var(--seed-color-stroke-critical);
+  border-color: var(--seed-color-stroke-critical-weak);
 }
 
 .seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {