@seed-design/css 0.2.4 → 1.0.0

package/all.css

@@ -472,18 +472,26 @@
   --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;
-  --seed-color-manner-temp-l4-text: #03a07e;
-  --seed-color-manner-temp-l4-bg: #ebf9f4;
-  --seed-color-manner-temp-l5-text: #d28500;
-  --seed-color-manner-temp-l6-text: #f06000;
-  --seed-color-manner-temp-l1-bg: #eff0f1;
-  --seed-color-manner-temp-l2-bg: #e7f2fc;
-  --seed-color-manner-temp-l3-bg: #e3f6fc;
-  --seed-color-manner-temp-l5-bg: #fff5e5;
+  --seed-color-manner-temp-l1-text: #757b85;
+  --seed-color-manner-temp-l2-text: #ab863f;
+  --seed-color-manner-temp-l3-text: #e08a00;
+  --seed-color-manner-temp-l4-text: #f57e00;
+  --seed-color-manner-temp-l4-bg: #fff3e5;
+  --seed-color-manner-temp-l5-text: #ff7300;
+  --seed-color-manner-temp-l6-text: #f60;
+  --seed-color-manner-temp-l1-bg: #f1f2f3;
+  --seed-color-manner-temp-l2-bg: #f8f4ec;
+  --seed-color-manner-temp-l3-bg: #fff5e5;
+  --seed-color-manner-temp-l5-bg: #fff1e5;
   --seed-color-manner-temp-l6-bg: #fff0e5;
+  --seed-color-manner-temp-l7-text: #ff5100;
+  --seed-color-manner-temp-l7-bg: #ffefe5;
+  --seed-color-manner-temp-l8-text: #f30;
+  --seed-color-manner-temp-l9-text: #f30a02;
+  --seed-color-manner-temp-l8-bg: #ffeee5;
+  --seed-color-manner-temp-l9-bg: #ffeceb;
+  --seed-color-manner-temp-l10-text: #cb0123;
+  --seed-color-manner-temp-l10-bg: #ffebee;
   --seed-gradient-fade-layer-floating: #fff0 0%, #000 100%;
   --seed-gradient-fade-layer-default: #000 0%, #fff0 100%;
   --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
@@ -657,18 +665,26 @@
   --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;
-  --seed-color-manner-temp-l4-text: #33cc94;
-  --seed-color-manner-temp-l4-bg: #162822;
-  --seed-color-manner-temp-l5-text: #ffa100;
-  --seed-color-manner-temp-l6-text: #ff9147;
-  --seed-color-manner-temp-l1-bg: #222226;
-  --seed-color-manner-temp-l2-bg: #16212b;
-  --seed-color-manner-temp-l3-bg: #12262c;
-  --seed-color-manner-temp-l5-bg: #2e2312;
-  --seed-color-manner-temp-l6-bg: #2e1d12;
+  --seed-color-manner-temp-l1-text: #b8b8b9;
+  --seed-color-manner-temp-l2-text: #f5db97;
+  --seed-color-manner-temp-l3-text: #fdda65;
+  --seed-color-manner-temp-l4-text: #fbbe55;
+  --seed-color-manner-temp-l4-bg: #372301;
+  --seed-color-manner-temp-l5-text: #faac4b;
+  --seed-color-manner-temp-l6-text: #fc9855;
+  --seed-color-manner-temp-l1-bg: #292929;
+  --seed-color-manner-temp-l2-bg: #332605;
+  --seed-color-manner-temp-l3-bg: #372b01;
+  --seed-color-manner-temp-l5-bg: #371f01;
+  --seed-color-manner-temp-l6-bg: #351b03;
+  --seed-color-manner-temp-l7-text: #f97a25;
+  --seed-color-manner-temp-l7-bg: #371701;
+  --seed-color-manner-temp-l8-text: #fe6a34;
+  --seed-color-manner-temp-l9-text: #fe6a5d;
+  --seed-color-manner-temp-l8-bg: #380f00;
+  --seed-color-manner-temp-l9-bg: #380500;
+  --seed-color-manner-temp-l10-text: #fb6f82;
+  --seed-color-manner-temp-l10-bg: #34040a;
   --seed-gradient-fade-layer-floating: #1d202500 0%, #000 100%;
   --seed-gradient-fade-layer-default: #000 0%, #16171b00 100%;
   --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
@@ -3913,7 +3929,7 @@
 }
 
 .seed-help-bubble__content {
-  background: var(--seed-color-bg-neutral-solid);
+  background: var(--seed-color-bg-neutral-inverted);
   padding-inline: var(--seed-dimension-x3);
   padding-block: var(--seed-dimension-x2_5);
   border-radius: var(--seed-radius-r3);
@@ -3922,7 +3938,6 @@
   max-width: var(--seed-box-max-width);
   flex-direction: column;
   display: flex;
-  box-shadow: 0 8px 24px #00000029;
 }
 
 .seed-help-bubble__content:is([data-state="open"], [data-open]) {
@@ -3957,29 +3972,29 @@
 }
 
 .seed-help-bubble__arrowTip {
-  fill: var(--seed-color-bg-neutral-solid);
+  fill: var(--seed-color-bg-neutral-inverted);
   width: 12px;
   height: 8px;
 }
 
 .seed-help-bubble__title {
-  color: var(--seed-color-palette-static-white);
+  color: var(--seed-color-fg-neutral-inverted);
   font-size: var(--seed-font-size-t3);
   font-weight: var(--seed-font-weight-bold);
   line-height: var(--seed-line-height-t3);
 }
 
 .seed-help-bubble__description {
-  color: var(--seed-color-palette-static-white);
+  color: var(--seed-color-fg-neutral-inverted);
   font-size: var(--seed-font-size-t3);
   font-weight: var(--seed-font-weight-regular);
   line-height: var(--seed-line-height-t3);
 }
 
 .seed-help-bubble__closeButton {
-  color: var(--seed-color-palette-static-white);
+  color: var(--seed-color-fg-neutral-inverted);
   --seed-icon-size: 14px;
-  --seed-icon-color: var(--seed-color-palette-static-white);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
   justify-content: center;
   align-items: center;
   width: 32px;
@@ -4218,6 +4233,28 @@
   --seed-suffix-icon-size: var(--seed-dimension-x3);
 }
 
+.seed-list-header {
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  width: 100%;
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+  padding-block: var(--seed-dimension-x2);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  justify-content: space-between;
+  display: flex;
+}
+
+.seed-list-header--variant_mediumWeak {
+  font-weight: var(--seed-font-weight-medium);
+  color: var(--seed-color-fg-neutral-subtle);
+}
+
+.seed-list-header--variant_boldSolid {
+  font-weight: var(--seed-font-weight-bold);
+  color: var(--seed-color-fg-neutral);
+}
+
 .seed-list-item__root {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
@@ -4333,13 +4370,12 @@
 
 .seed-manner-temp {
   box-sizing: border-box;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--seed-dimension-x1);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-bold);
-  --seed-suffix-icon-size: var(--seed-dimension-x6);
+  --seed-suffix-icon-size: var(--seed-dimension-x8);
+  justify-content: flex-start;
+  align-items: center;
   display: inline-flex;
 }
 
@@ -4367,6 +4403,22 @@
   color: var(--seed-color-manner-temp-l6-text);
 }
 
+.seed-manner-temp--level_l7 {
+  color: var(--seed-color-manner-temp-l7-text);
+}
+
+.seed-manner-temp--level_l8 {
+  color: var(--seed-color-manner-temp-l8-text);
+}
+
+.seed-manner-temp--level_l9 {
+  color: var(--seed-color-manner-temp-l9-text);
+}
+
+.seed-manner-temp--level_l10 {
+  color: var(--seed-color-manner-temp-l10-text);
+}
+
 .seed-manner-temp-badge {
   box-sizing: border-box;
   text-transform: none;
@@ -4374,7 +4426,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: var(--seed-radius-full);
-  min-height: 20px;
+  min-height: var(--seed-dimension-x5);
   padding-inline: var(--seed-dimension-x1_5);
   padding-block: var(--seed-dimension-x0_5);
   font-size: var(--seed-font-size-t1);
@@ -4416,6 +4468,26 @@
   color: var(--seed-color-manner-temp-l6-text);
 }
 
+.seed-manner-temp-badge--level_l7 {
+  background-color: var(--seed-color-manner-temp-l7-bg);
+  color: var(--seed-color-manner-temp-l7-text);
+}
+
+.seed-manner-temp-badge--level_l8 {
+  background-color: var(--seed-color-manner-temp-l8-bg);
+  color: var(--seed-color-manner-temp-l8-text);
+}
+
+.seed-manner-temp-badge--level_l9 {
+  background-color: var(--seed-color-manner-temp-l9-bg);
+  color: var(--seed-color-manner-temp-l9-text);
+}
+
+.seed-manner-temp-badge--level_l10 {
+  background-color: var(--seed-color-manner-temp-l10-bg);
+  color: var(--seed-color-manner-temp-l10-text);
+}
+
 .seed-menu-sheet__positioner {
   overscroll-behavior-y: none;
   --sheet-z-index: 2;
@@ -5201,7 +5273,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);
@@ -5221,11 +5292,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 {
@@ -5234,22 +5305,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]) {
@@ -5257,7 +5331,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);
 }
 
@@ -5370,15 +5453,12 @@
 
 .seed-snackbar__root {
   box-sizing: border-box;
-  background: var(--seed-color-bg-neutral-solid);
+  background: var(--seed-color-bg-neutral-inverted);
   border-radius: var(--seed-radius-r2);
   width: 100%;
   max-width: 560px;
-  padding-inline: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x2_5);
   padding-block: var(--seed-dimension-x2_5);
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--seed-dimension-x2);
   min-height: 44px;
   animation: seed-enter;
   animation-timing-function: var(--seed-timing-function-enter);
@@ -5387,6 +5467,7 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 0;
   --seed-enter-scale: .8;
+  align-items: center;
   display: flex;
 }
 
@@ -5401,19 +5482,28 @@
   animation-fill-mode: forwards;
 }
 
+.seed-snackbar__content {
+  padding-inline: var(--seed-dimension-x1_5);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--seed-dimension-x2_5);
+  flex-grow: 1;
+  display: flex;
+}
+
 .seed-snackbar__message {
-  color: var(--seed-color-palette-static-white);
+  color: var(--seed-color-fg-neutral-inverted);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-regular);
-  flex-grow: 1;
   margin: 0;
 }
 
 .seed-snackbar__prefixIcon {
-  flex-shrink: 0;
   width: 24px;
   height: 24px;
+  padding-right: var(--seed-dimension-x0_5);
+  flex-shrink: 0;
 }
 
 .seed-snackbar__actionButton {
@@ -5490,132 +5580,133 @@
   cursor: not-allowed;
 }
 
-.seed-switch__control {
+.seed-switch__label {
+  font-weight: var(--seed-font-weight-medium);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
+}
+
+.seed-switch__root--size_16 {
+  min-height: var(--seed-dimension-x6);
+  gap: var(--seed-dimension-x1_5);
+  --switch-mark-margin-top: calc((var(--seed-dimension-x6)  - 16px) / 2);
+}
+
+.seed-switch__label--size_16 {
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
+  margin-top: calc(12px - .5625rem);
+}
+
+.seed-switch__root--size_24 {
+  min-height: var(--seed-dimension-x6);
+  gap: var(--seed-dimension-x2);
+  --switch-mark-margin-top: calc((var(--seed-dimension-x6)  - 24px) / 2);
+}
+
+.seed-switch__label--size_24 {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  margin-top: calc(12px - .59375rem);
+}
+
+.seed-switch__root--size_32 {
+  min-height: var(--seed-dimension-x8);
+  gap: var(--seed-dimension-x2_5);
+  --switch-mark-margin-top: calc((var(--seed-dimension-x8)  - 32px) / 2);
+}
+
+.seed-switch__label--size_32 {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  margin-top: calc(16px - .6875rem);
+}
+
+.seed-switch-mark__root {
   box-sizing: border-box;
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-palette-gray-600);
+  margin: var(--switch-mark-margin-top, 0) 0;
   transition: background-color 50ms cubic-bezier(.35, 0, .35, 1) 20ms;
   display: block;
   position: relative;
 }
 
-.seed-switch__control:is(:disabled, [disabled], [data-disabled]) {
+.seed-switch-mark__root:is(:disabled, [disabled], [data-disabled]) {
   opacity: .38;
 }
 
-.seed-switch__thumb {
+.seed-switch-mark__thumb {
   border-radius: var(--seed-radius-full);
   transition: transform .15s cubic-bezier(.35, 0, .35, 1);
 }
 
-.seed-switch__label {
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-fg-neutral);
-}
-
-.seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
-  color: var(--seed-color-fg-disabled);
-}
-
-.seed-switch__control--tone_neutral:is(:checked, [data-checked]) {
+.seed-switch-mark__root--tone_neutral:is(:checked, [data-checked]) {
   background: var(--seed-color-bg-neutral-inverted);
 }
 
-.seed-switch__thumb--tone_neutral {
+.seed-switch-mark__thumb--tone_neutral {
   background: var(--seed-color-fg-neutral-inverted);
 }
 
-.seed-switch__control--tone_brand:is(:checked, [data-checked]) {
+.seed-switch-mark__root--tone_brand:is(:checked, [data-checked]) {
   background: var(--seed-color-bg-brand-solid);
 }
 
-.seed-switch__thumb--tone_brand {
+.seed-switch-mark__thumb--tone_brand {
   background: var(--seed-color-palette-static-white);
 }
 
-.seed-switch__root--size_16 {
-  gap: var(--seed-dimension-x1_5);
-  min-height: 24px;
-}
-
-.seed-switch__control--size_16 {
+.seed-switch-mark__root--size_16 {
   min-block-size: 16px;
   min-inline-size: 26px;
-  margin: 4px 0;
   padding: 2px;
 }
 
-.seed-switch__thumb--size_16 {
+.seed-switch-mark__thumb--size_16 {
   width: 12px;
   height: 12px;
 }
 
-.seed-switch__thumb--size_16:is(:checked, [data-checked]) {
+.seed-switch-mark__thumb--size_16:is(:checked, [data-checked]) {
   transform: translateX(10px);
 }
 
-.seed-switch__label--size_16 {
-  font-size: var(--seed-font-size-t3);
-  line-height: var(--seed-line-height-t3);
-  margin-top: calc(12px - .5625rem);
-}
-
-.seed-switch__root--size_24 {
-  gap: var(--seed-dimension-x2);
-  min-height: 24px;
-}
-
-.seed-switch__control--size_24 {
+.seed-switch-mark__root--size_24 {
   min-block-size: 24px;
   min-inline-size: 38px;
-  margin: 0;
   padding: 2px;
 }
 
-.seed-switch__thumb--size_24 {
+.seed-switch-mark__thumb--size_24 {
   width: 20px;
   height: 20px;
   box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
 }
 
-.seed-switch__thumb--size_24:is(:checked, [data-checked]) {
+.seed-switch-mark__thumb--size_24:is(:checked, [data-checked]) {
   transform: translateX(14px);
 }
 
-.seed-switch__label--size_24 {
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
-  margin-top: calc(12px - .59375rem);
-}
-
-.seed-switch__root--size_32 {
-  gap: var(--seed-dimension-x2_5);
-  min-height: 32px;
-}
-
-.seed-switch__control--size_32 {
+.seed-switch-mark__root--size_32 {
   min-block-size: 32px;
   min-inline-size: 52px;
-  margin: 0;
   padding: 3px;
 }
 
-.seed-switch__thumb--size_32 {
+.seed-switch-mark__thumb--size_32 {
   width: 26px;
   height: 26px;
   box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
 }
 
-.seed-switch__thumb--size_32:is(:checked, [data-checked]) {
+.seed-switch-mark__thumb--size_32:is(:checked, [data-checked]) {
   transform: translateX(20px);
 }
 
-.seed-switch__label--size_32 {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
-  margin-top: calc(16px - .6875rem);
-}
-
 .seed-tabs__root {
   position: relative;
 }