@seed-design/css 1.1.4 → 1.1.6

package/all.css

@@ -249,6 +249,7 @@
   --seed-duration-d4: .2s;
   --seed-duration-d5: .25s;
   --seed-duration-d6: .3s;
+  --seed-duration-color-transition: var(--seed-duration-d3);
   --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)));
@@ -459,6 +460,8 @@
   --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-bg-transparent: #0000;
+  --seed-color-bg-transparent-pressed: var(--seed-color-palette-static-black-alpha-100);
   --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);
@@ -652,6 +655,8 @@
   --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-800);
   --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-900);
   --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
+  --seed-color-bg-transparent: #fff0;
+  --seed-color-bg-transparent-pressed: 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);
@@ -744,7 +749,7 @@
 }
 
 .seed-action-button {
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
 }
 
 .seed-action-button--variant_brandSolid {
@@ -856,7 +861,7 @@
 }
 
 .seed-action-button--variant_brandOutline {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   border-style: solid;
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-muted);
@@ -870,11 +875,11 @@
 }
 
 .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-disabled);
   --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -883,11 +888,11 @@
 }
 
 .seed-action-button--variant_brandOutline[data-loading] {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
 }
 
 .seed-action-button--variant_neutralOutline {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   border-style: solid;
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-muted);
@@ -901,11 +906,11 @@
 }
 
 .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   border-color: var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-disabled);
   --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -914,7 +919,7 @@
 }
 
 .seed-action-button--variant_neutralOutline[data-loading] {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
 }
 
 .seed-action-button--variant_ghost {
@@ -931,7 +936,7 @@
 }
 
 .seed-action-button--variant_ghost:is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
@@ -943,7 +948,7 @@
 }
 
 .seed-action-button--variant_ghost[data-loading] {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-action-button--size_xsmall {
@@ -2672,7 +2677,7 @@
   background-color: var(--seed-color-palette-gray-400);
   width: 36px;
   height: 4px;
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   touch-action: pan-y;
   border-radius: 9999px;
   position: absolute;
@@ -2916,6 +2921,7 @@
 .seed-checkmark__root {
   box-sizing: border-box;
   margin-top: var(--checkmark-margin-top, 0);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   flex-shrink: 0;
   position: relative;
 }
@@ -2941,7 +2947,7 @@
 }
 
 .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
@@ -2958,7 +2964,7 @@
 }
 
 .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-checkmark__icon--variant_ghost {
@@ -3051,7 +3057,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: var(--seed-radius-full);
-  transition-duration: var(--seed-duration-d4);
+  transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   border: none;
   flex-shrink: 0;
@@ -3136,13 +3142,13 @@
 }
 
 .seed-chip__root--variant_outlineStrong {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   --seed-icon-color: var(--seed-color-fg-neutral);
 }
 
 .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
@@ -3171,13 +3177,13 @@
 }
 
 .seed-chip__root--variant_outlineWeak {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   --seed-icon-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);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
@@ -3312,6 +3318,7 @@
   padding-bottom: var(--seed-dimension-x2);
   font-family: inherit;
   font-weight: var(--seed-font-weight-medium);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   border: none;
   justify-content: center;
   align-items: center;
@@ -3351,7 +3358,7 @@
 }
 
 .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+  background-color: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
@@ -3369,9 +3376,9 @@
 }
 
 .seed-chip-tabs__trigger--variant_neutralOutline {
+  background-color: var(--seed-color-bg-transparent);
   border: 1px solid var(--seed-color-stroke-neutral-muted);
   color: var(--seed-color-fg-neutral);
-  background-color: #0000;
 }
 
 .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
@@ -3381,7 +3388,7 @@
 }
 
 .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+  background-color: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
@@ -3497,7 +3504,7 @@
   --seed-icon-size: 22px;
   --size: 16px;
   --thickness: 2px;
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   box-shadow: 0 2px 6px #00000026;
 }
 
@@ -4187,7 +4194,7 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-bold);
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
   position: relative;
   overflow: hidden;
   box-shadow: 0 2px 6px #00000026;
@@ -4526,22 +4533,27 @@
   z-index: -1;
   cursor: pointer;
   border-radius: var(--seed-radius-r3);
+  background-color: var(--seed-color-bg-transparent);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
-  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;
+  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   border: none;
   padding: 0;
   position: absolute;
   inset: 0;
 }
 
-.seed-input-button__button:is(:disabled, [disabled], [data-disabled]) {
+.seed-input-button__button[data-disabled] {
   cursor: not-allowed;
   background-color: var(--seed-color-bg-disabled);
 }
 
-.seed-input-button__button:is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-transparent-pressed);
+}
+
+.seed-input-button__button[data-readonly]:not([data-disabled]) {
+  cursor: default;
+  background-color: var(--seed-color-bg-disabled);
 }
 
 .seed-input-button__button:is(:focus, [data-focus]) {
@@ -4564,10 +4576,14 @@
   overflow: hidden;
 }
 
-.seed-input-button__value:is(:disabled, [disabled], [data-disabled]) {
+.seed-input-button__value[data-disabled] {
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-input-button__value[data-readonly]:not([data-disabled]) {
+  color: var(--seed-color-fg-neutral);
+}
+
 .seed-input-button__placeholder {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
@@ -4580,10 +4596,14 @@
   overflow: hidden;
 }
 
-.seed-input-button__placeholder:is(:disabled, [disabled], [data-disabled]) {
+.seed-input-button__placeholder[data-disabled] {
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-input-button__placeholder[data-readonly]:not([data-disabled]) {
+  color: var(--seed-color-fg-placeholder);
+}
+
 .seed-input-button__prefixText {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
@@ -4706,7 +4726,7 @@
   --seed-box-align-items: center;
   align-items: var(--seed-box-align-items);
   transition-property: background-color;
-  transition-duration: var(--seed-duration-d3);
+  transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   border: none;
   font-family: inherit;
@@ -4751,12 +4771,12 @@
 .seed-list-item__content {
   box-sizing: border-box;
   text-align: start;
+  background-color: var(--seed-color-bg-transparent);
   --seed-box-gap: var(--seed-dimension-x0_5);
   align-items: flex-start;
   gap: var(--seed-box-gap);
   --seed-box-padding-right: var(--seed-dimension-x2_5);
   padding: 0 var(--seed-box-padding-right) 0 0;
-  background: none;
   border: none;
   flex-direction: column;
   flex-grow: 1;
@@ -4775,14 +4795,14 @@
   content: "";
   z-index: -1;
   transition-property: background-color;
-  transition-duration: var(--seed-duration-d3);
+  transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   position: absolute;
   inset: 0;
 }
 
 .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before, .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+  background-color: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-list-item__title {
@@ -5542,6 +5562,7 @@
   border-color: var(--seed-color-stroke-neutral-weak);
   border-radius: var(--seed-radius-full);
   margin-top: var(--radiomark-margin-top, 0);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   flex: none;
   justify-content: center;
   align-items: center;
@@ -5550,7 +5571,7 @@
 }
 
 .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+  background-color: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-radiomark__root:is(:checked, [data-checked]) {
@@ -5562,9 +5583,9 @@
 }
 
 .seed-radiomark__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+  background-color: var(--seed-color-bg-transparent);
   border-width: 1px;
   border-color: var(--seed-color-palette-gray-300);
-  background: none;
 }
 
 .seed-radiomark__icon {
@@ -5657,10 +5678,11 @@
 }
 
 .seed-reaction-button {
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
-  background: var(--seed-color-bg-neutral-weak);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  background: var(--seed-color-bg-transparent);
   font-weight: var(--seed-font-weight-medium);
   color: var(--seed-color-fg-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   --track-color: var(--seed-color-palette-gray-500);
   --range-color: var(--seed-color-fg-neutral);
   --seed-count-font-weight: var(--seed-font-weight-bold);
@@ -5668,11 +5690,11 @@
 }
 
 .seed-reaction-button:is(:active, [data-active]) {
-  background: var(--seed-color-bg-neutral-weak-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
-  background: var(--seed-color-bg-layer-default);
+  background: var(--seed-color-bg-transparent);
   color: var(--seed-color-fg-brand);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
   --seed-prefix-icon-color: var(--seed-color-fg-brand);
@@ -5680,7 +5702,7 @@
 }
 
 .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
@@ -5697,7 +5719,7 @@
 }
 
 .seed-reaction-button:is([aria-pressed="true"], [data-pressed])[data-loading] {
-  background: var(--seed-color-bg-layer-default-pressed);
+  background: var(--seed-color-bg-transparent-pressed);
   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);
@@ -5806,7 +5828,7 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   color: var(--seed-color-fg-neutral-subtle);
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing), color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   display: flex;
 }
 
@@ -5841,11 +5863,13 @@
   padding-block: var(--seed-dimension-x5);
   border-radius: var(--seed-radius-r3);
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+  background-color: var(--seed-color-bg-transparent);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   display: flex;
 }
 
 .seed-select-box__root:is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-layer-default-pressed);
+  background-color: var(--seed-color-bg-transparent-pressed);
 }
 
 .seed-select-box__root:is(:checked, [data-checked]) {
@@ -6975,7 +6999,7 @@
 
 .seed-text-input__root {
   width: 100%;
-  transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing);
+  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   align-items: center;
   display: flex;
   overflow: hidden;
@@ -7191,7 +7215,7 @@
 }
 
 .seed-toggle-button {
-  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   font-weight: var(--seed-font-weight-bold);
 }