@seed-design/css 0.2.3 → 0.2.5

package/all.css

@@ -639,8 +639,8 @@
   --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-600);
   --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
   --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
-  --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-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-stroke-brand-weak: var(--seed-color-palette-carrot-300);
   --seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
@@ -2305,7 +2305,7 @@
 
 .seed-badge__root--tone_warning-variant_solid {
   background-color: var(--seed-color-bg-warning-solid);
-  color: var(--seed-color-fg-neutral);
+  color: var(--seed-color-palette-static-black-alpha-900);
 }
 
 .seed-badge__root--tone_warning-variant_outline {
@@ -2656,11 +2656,11 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-checkbox__label--weight_default {
+.seed-checkbox__label--weight_regular {
   font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-checkbox__label--weight_stronger {
+.seed-checkbox__label--weight_bold {
   font-weight: var(--seed-font-weight-bold);
 }
 
@@ -2710,63 +2710,36 @@
 }
 
 .seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  background: var(--seed-color-bg-brand-solid);
   border-width: 0;
 }
 
-.seed-checkmark__root--variant_square:is(:active, [data-active]) {
+.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
   background: var(--seed-color-bg-layer-default-pressed);
 }
 
-.seed-checkmark__root--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  background: var(--seed-color-bg-brand-solid-pressed);
-}
-
 .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
   background: var(--seed-color-bg-disabled);
   border-color: var(--seed-color-stroke-neutral-muted);
 }
 
-.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-  background: var(--seed-color-bg-disabled);
-}
-
 .seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  color: var(--seed-color-palette-static-white);
   display: block;
 }
 
 .seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
   color: var(--seed-color-fg-disabled);
-  display: block;
 }
 
-.seed-checkmark__root--variant_ghost, .seed-checkmark__root--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  background: none;
-}
-
-.seed-checkmark__root--variant_ghost:is(:active, [data-active]) {
+.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
   background: var(--seed-color-bg-layer-default-pressed);
 }
 
-.seed-checkmark__root--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  background: var(--seed-color-palette-carrot-200);
-}
-
-.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-  background: none;
-}
-
 .seed-checkmark__icon--variant_ghost {
   color: var(--seed-color-fg-placeholder);
   display: block;
 }
 
-.seed-checkmark__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-  color: var(--seed-color-fg-brand);
-}
-
-.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
+.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]), .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
   color: var(--seed-color-fg-disabled);
 }
 
@@ -2782,6 +2755,46 @@
   height: var(--seed-dimension-x5);
 }
 
+.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  background: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+}
+
+.seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  background: var(--seed-color-bg-brand-solid);
+}
+
+.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
+  background: var(--seed-color-bg-brand-solid-pressed);
+}
+
+.seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
+  background: var(--seed-color-palette-gray-200);
+}
+
+.seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
+  background: var(--seed-color-palette-carrot-200);
+}
+
+.seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+  color: var(--seed-color-fg-brand);
+}
+
 .seed-checkmark__icon--size_medium-variant_ghost {
   width: 14px;
   height: 14px;
@@ -4826,8 +4839,8 @@
 
 .seed-page-banner__root--tone_warning-variant_solid {
   background-color: var(--seed-color-bg-warning-solid);
-  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
+  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
 }
 
 .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
@@ -4835,7 +4848,7 @@
 }
 
 .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
-  color: var(--seed-color-fg-neutral);
+  color: var(--seed-color-palette-static-black-alpha-900);
 }
 
 .seed-page-banner__root--tone_critical-variant_weak {
@@ -4958,11 +4971,11 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-radio__label--weight_default {
+.seed-radio__label--weight_regular {
   font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-radio__label--weight_stronger {
+.seed-radio__label--weight_bold {
   font-weight: var(--seed-font-weight-bold);
 }
 
@@ -4990,7 +5003,6 @@
 
 .seed-radiomark__root {
   box-sizing: border-box;
-  background-color: var(--seed-color-bg-layer-default);
   border-style: solid;
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-weak);
@@ -5003,19 +5015,14 @@
   position: relative;
 }
 
-.seed-radiomark__root:is(:active, [data-active]) {
+.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
   background-color: var(--seed-color-bg-layer-default-pressed);
 }
 
 .seed-radiomark__root:is(:checked, [data-checked]) {
-  background-color: var(--seed-color-bg-brand-solid);
   border-width: 0;
 }
 
-.seed-radiomark__root:is(:active, [data-active]):is(:checked, [data-checked]) {
-  background-color: var(--seed-color-bg-brand-solid-pressed);
-}
-
 .seed-radiomark__root:is(:disabled, [disabled], [data-disabled]) {
   background-color: var(--seed-color-palette-gray-300);
 }
@@ -5032,7 +5039,6 @@
 }
 
 .seed-radiomark__icon:is(:checked, [data-checked]) {
-  color: var(--seed-color-palette-static-white);
   display: block;
 }
 
@@ -5040,6 +5046,30 @@
   color: var(--seed-color-palette-gray-300);
 }
 
+.seed-radiomark__root--tone_neutral:is(:checked, [data-checked]) {
+  background-color: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-neutral-inverted-pressed);
+}
+
+.seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-radiomark__root--tone_brand:is(:checked, [data-checked]) {
+  background-color: var(--seed-color-bg-brand-solid);
+}
+
+.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-brand-solid-pressed);
+}
+
+.seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
+  color: var(--seed-color-palette-static-white);
+}
+
 .seed-radiomark__root--size_large {
   width: var(--seed-dimension-x6);
   height: var(--seed-dimension-x6);
@@ -5171,7 +5201,6 @@
 
 .seed-segmented-control__root {
   box-sizing: border-box;
-  min-width: fit-content;
   max-width: 100%;
   padding: var(--seed-dimension-x1);
   border-radius: var(--seed-radius-full);
@@ -5191,11 +5220,11 @@
   inset-block: var(--seed-dimension-x1);
   width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
   border-radius: var(--seed-radius-full);
-  background-color: var(--seed-color-bg-layer-default);
+  background-color: var(--seed-color-palette-gray-00);
+  box-shadow: 0px 1px 6px 0px #0000000d, inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
   position: absolute;
   inset-inline-start: var(--seed-dimension-x1);
-  box-shadow: 0 1px 6px #0000000d;
 }
 
 .seed-segmented-control__item {
@@ -5204,22 +5233,25 @@
   user-select: none;
   box-sizing: border-box;
   overflow-wrap: break-word;
+  justify-content: center;
+  align-items: center;
+  gap: var(--seed-dimension-x1_5);
   min-width: 86px;
-  min-height: var(--seed-dimension-x8);
-  padding-inline: var(--seed-dimension-x4);
+  height: 100%;
+  min-height: 34px;
+  padding-inline: var(--seed-dimension-x6);
+  padding-block: var(--seed-dimension-x1_5);
   border-radius: var(--seed-radius-full);
-  font-weight: var(--seed-font-weight-medium);
+  font-weight: var(--seed-font-weight-bold);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
-  color: var(--seed-color-fg-neutral-muted);
-  justify-content: center;
-  align-items: center;
+  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);
   display: flex;
 }
 
 .seed-segmented-control__item:is(:checked, [data-checked]) {
   color: var(--seed-color-fg-neutral);
-  font-weight: var(--seed-font-weight-bold);
 }
 
 .seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
@@ -5227,7 +5259,16 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-segmented-control__item:not(:is(:checked, [data-checked])):is(:active, [data-active]) {
+.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+  background-color: var(--seed-color-bg-disabled);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
+  background-color: var(--seed-color-palette-gray-100);
+}
+
+.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
   background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
 
@@ -5473,13 +5514,8 @@
   opacity: .38;
 }
 
-.seed-switch__control:is(:checked, [data-checked]) {
-  background: var(--seed-color-bg-brand-solid);
-}
-
 .seed-switch__thumb {
   border-radius: var(--seed-radius-full);
-  background: var(--seed-color-palette-static-white);
   transition: transform .15s cubic-bezier(.35, 0, .35, 1);
 }
 
@@ -5492,6 +5528,22 @@
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-switch__control--tone_neutral:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-switch__thumb--tone_neutral {
+  background: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-switch__control--tone_brand:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-brand-solid);
+}
+
+.seed-switch__thumb--tone_brand {
+  background: var(--seed-color-palette-static-white);
+}
+
 .seed-switch__root--size_16 {
   gap: var(--seed-dimension-x1_5);
   min-height: 24px;
@@ -5556,12 +5608,12 @@
   min-block-size: 32px;
   min-inline-size: 52px;
   margin: 0;
-  padding: 2px;
+  padding: 3px;
 }
 
 .seed-switch__thumb--size_32 {
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
 }