@seed-design/css 0.0.39 → 0.1.0

package/all.css

@@ -63,7 +63,7 @@
 .seed-box {
   --seed-box-background: initial;
   --seed-box-color: initial;
-  background-color: var(--seed-box-background);
+  background: var(--seed-box-background);
   color: var(--seed-box-color);
   --seed-box-border-style: solid;
   --seed-box-border-color: initial;
@@ -160,7 +160,7 @@
 
 .seed-box:is(:active, [data-active]) {
   --seed-box-background--active: var(--seed-box-background);
-  background-color: var(--seed-box-background--active);
+  background: var(--seed-box-background--active);
 }
 
 .seed-consistent-width:before {
@@ -367,13 +367,11 @@
   --seed-color-fg-critical: var(--seed-color-palette-red-700);
   --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-informative: var(--seed-color-palette-blue-700);
-  --seed-color-fg-magic: var(--seed-color-palette-purple-700);
   --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
   --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
   --seed-color-fg-positive: var(--seed-color-palette-green-700);
   --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
   --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
-  --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
   --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
   --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
   --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
@@ -382,6 +380,7 @@
   --seed-color-bg-disabled: var(--seed-color-palette-gray-200);
   --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
   --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
+  --seed-color-bg-magic-weak: #f9f2ee;
   --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
   --seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
   --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -397,10 +396,6 @@
   --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
   --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
   --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
-  --seed-color-bg-magic-solid: var(--seed-color-palette-purple-700);
-  --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
-  --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-800);
-  --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
   --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
   --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
   --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
@@ -438,7 +433,12 @@
   --seed-color-manner-temp-l5-text: #d28500;
   --seed-color-manner-temp-l6-bg: #fff0e5;
   --seed-color-manner-temp-l6-text: #f06000;
-  --seed-gradient-shimmer: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
+  --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e78a 46%, #fef0e78a 54%, #fef0e700 100%;
+  --seed-gradient-fade-neutral: #fff 0%, #fff0 100%;
+  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
+  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
+  --seed-gradient-highlight-magic: #f60 20%, #d25aca 80%;
 }
 
 :root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
@@ -540,13 +540,11 @@
   --seed-color-fg-critical: var(--seed-color-palette-red-700);
   --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
   --seed-color-fg-informative: var(--seed-color-palette-blue-700);
-  --seed-color-fg-magic: var(--seed-color-palette-purple-700);
   --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
   --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
   --seed-color-fg-positive: var(--seed-color-palette-green-700);
   --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
   --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
-  --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
   --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
   --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
   --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
@@ -555,6 +553,7 @@
   --seed-color-bg-disabled: var(--seed-color-palette-gray-300);
   --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
   --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
+  --seed-color-bg-magic-weak: #201f1f;
   --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
   --seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
   --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -570,10 +569,6 @@
   --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
   --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
   --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
-  --seed-color-bg-magic-solid: var(--seed-color-palette-purple-600);
-  --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
-  --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-700);
-  --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
   --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
   --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
   --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
@@ -611,7 +606,12 @@
   --seed-color-manner-temp-l5-text: #ffa100;
   --seed-color-manner-temp-l6-bg: #2e1d12;
   --seed-color-manner-temp-l6-text: #ff9147;
-  --seed-gradient-shimmer: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
+  --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e71a 46%, #fef0e71a 54%, #fef0e700 100%;
+  --seed-gradient-fade-neutral: #1d2025 0%, #1d202500 100%;
+  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
+  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
+  --seed-gradient-highlight-magic: #ff6000 20%, #d25aca 80%;
 }
 
 .seed-avatar__root {
@@ -1591,8 +1591,8 @@
 
 .seed-bottom-sheet__description {
   color: var(--seed-color-fg-neutral-muted);
-  font-size: var(--seed-font-size-t6);
-  line-height: var(--seed-line-height-t6);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
   white-space: pre-wrap;
   margin: 0;
@@ -3083,17 +3083,17 @@
 }
 
 .seed-callout__root--tone_magic {
-  background-color: var(--seed-color-bg-magic-weak);
-  --seed-prefix-icon-color: var(--seed-color-fg-magic-contrast);
-  --seed-suffix-icon-color: var(--seed-color-fg-magic-contrast);
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
+  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
 
 .seed-callout__root--tone_magic:is(button):is(:active, [data-active]) {
-  background-color: var(--seed-color-bg-magic-weak-pressed);
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
 }
 
 .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
-  color: var(--seed-color-fg-magic-contrast);
+  color: var(--seed-color-fg-neutral);
 }
 
 .seed-manner-temp {
@@ -3500,6 +3500,7 @@
   fill: var(--seed-color-bg-neutral-solid);
   width: 12px;
   height: 8px;
+  font-size: 0;
 }
 
 .seed-help-bubble__title {
@@ -4112,7 +4113,6 @@
 
 .seed-skeleton {
   box-sizing: border-box;
-  background: var(--seed-color-palette-gray-200);
   --seed-box-width: initial;
   --seed-box-height: initial;
   width: var(--seed-box-width);
@@ -4123,7 +4123,6 @@
 
 .seed-skeleton:after {
   content: "";
-  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer));
   width: 100%;
   height: 100%;
   animation-name: slide-x;
@@ -4151,6 +4150,22 @@
   border-radius: var(--seed-radius-full);
 }
 
+.seed-skeleton--tone_neutral {
+  background: var(--seed-color-palette-gray-200);
+}
+
+.seed-skeleton--tone_neutral:after {
+  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
+}
+
+.seed-skeleton--tone_magic {
+  background: var(--seed-color-bg-magic-weak);
+}
+
+.seed-skeleton--tone_magic:after {
+  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
+}
+
 .seed-snackbar__root {
   box-sizing: border-box;
   background: var(--seed-color-bg-neutral-solid);
@@ -4455,6 +4470,14 @@
   overflow: hidden;
 }
 
+.seed-text--textDecorationLine_none {
+  text-decoration-line: none;
+}
+
+.seed-text--textDecorationLine_line-through {
+  text-decoration-line: line-through;
+}
+
 .seed-link-content {
   cursor: pointer;
   box-sizing: border-box;