@seed-design/css 0.0.39 → 0.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/all.css +45 -23
  2. package/all.min.css +1 -1
  3. package/base.css +16 -16
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/callout.css +7 -7
  7. package/recipes/skeleton.css +12 -2
  8. package/recipes/skeleton.d.ts +4 -0
  9. package/recipes/skeleton.mjs +6 -1
  10. package/recipes/text.css +6 -0
  11. package/recipes/text.d.ts +4 -0
  12. package/recipes/text.mjs +6 -1
  13. package/vars/color/bg.d.ts +1 -4
  14. package/vars/color/bg.mjs +1 -4
  15. package/vars/color/fg.d.ts +0 -2
  16. package/vars/color/fg.mjs +0 -2
  17. package/vars/component/callout.d.ts +7 -7
  18. package/vars/component/callout.mjs +7 -7
  19. package/vars/component/skeleton.d.ts +21 -5
  20. package/vars/component/skeleton.mjs +21 -5
  21. package/vars/gradient.d.ts +6 -1
  22. package/vars/gradient.mjs +6 -1
package/all.css CHANGED
@@ -63,7 +63,7 @@
63
63
  .seed-box {
64
64
  --seed-box-background: initial;
65
65
  --seed-box-color: initial;
66
- background-color: var(--seed-box-background);
66
+ background: var(--seed-box-background);
67
67
  color: var(--seed-box-color);
68
68
  --seed-box-border-style: solid;
69
69
  --seed-box-border-color: initial;
@@ -160,7 +160,7 @@
160
160
 
161
161
  .seed-box:is(:active, [data-active]) {
162
162
  --seed-box-background--active: var(--seed-box-background);
163
- background-color: var(--seed-box-background--active);
163
+ background: var(--seed-box-background--active);
164
164
  }
165
165
 
166
166
  .seed-consistent-width:before {
@@ -367,13 +367,11 @@
367
367
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
368
368
  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
369
369
  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
370
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
371
370
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
372
371
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
373
372
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
374
373
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
375
374
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
376
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
377
375
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
378
376
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
379
377
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
@@ -382,6 +380,7 @@
382
380
  --seed-color-bg-disabled: var(--seed-color-palette-gray-200);
383
381
  --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
384
382
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
383
+ --seed-color-bg-magic-weak: #f9f2ee;
385
384
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
386
385
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
387
386
  --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -397,10 +396,6 @@
397
396
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
398
397
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
399
398
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
400
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-700);
401
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
402
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-800);
403
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
404
399
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
405
400
  --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
406
401
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
@@ -438,7 +433,12 @@
438
433
  --seed-color-manner-temp-l5-text: #d28500;
439
434
  --seed-color-manner-temp-l6-bg: #fff0e5;
440
435
  --seed-color-manner-temp-l6-text: #f06000;
441
- --seed-gradient-shimmer: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
436
+ --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
437
+ --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e78a 46%, #fef0e78a 54%, #fef0e700 100%;
438
+ --seed-gradient-fade-neutral: #fff 0%, #fff0 100%;
439
+ --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
440
+ --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
441
+ --seed-gradient-highlight-magic: #f60 20%, #d25aca 80%;
442
442
  }
443
443
 
444
444
  :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 @@
540
540
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
541
541
  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
542
542
  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
543
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
544
543
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
545
544
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
546
545
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
547
546
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
548
547
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
549
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
550
548
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
551
549
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
552
550
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
@@ -555,6 +553,7 @@
555
553
  --seed-color-bg-disabled: var(--seed-color-palette-gray-300);
556
554
  --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
557
555
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
556
+ --seed-color-bg-magic-weak: #201f1f;
558
557
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
559
558
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
560
559
  --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -570,10 +569,6 @@
570
569
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
571
570
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
572
571
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
573
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-600);
574
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
575
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-700);
576
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
577
572
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
578
573
  --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
579
574
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
@@ -611,7 +606,12 @@
611
606
  --seed-color-manner-temp-l5-text: #ffa100;
612
607
  --seed-color-manner-temp-l6-bg: #2e1d12;
613
608
  --seed-color-manner-temp-l6-text: #ff9147;
614
- --seed-gradient-shimmer: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
609
+ --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
610
+ --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e71a 46%, #fef0e71a 54%, #fef0e700 100%;
611
+ --seed-gradient-fade-neutral: #1d2025 0%, #1d202500 100%;
612
+ --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
613
+ --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
614
+ --seed-gradient-highlight-magic: #ff6000 20%, #d25aca 80%;
615
615
  }
616
616
 
617
617
  .seed-avatar__root {
@@ -3083,17 +3083,17 @@
3083
3083
  }
3084
3084
 
3085
3085
  .seed-callout__root--tone_magic {
3086
- background-color: var(--seed-color-bg-magic-weak);
3087
- --seed-prefix-icon-color: var(--seed-color-fg-magic-contrast);
3088
- --seed-suffix-icon-color: var(--seed-color-fg-magic-contrast);
3086
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
3087
+ --seed-prefix-icon-color: var(--seed-color-fg-neutral);
3088
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3089
3089
  }
3090
3090
 
3091
3091
  .seed-callout__root--tone_magic:is(button):is(:active, [data-active]) {
3092
- background-color: var(--seed-color-bg-magic-weak-pressed);
3092
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3093
3093
  }
3094
3094
 
3095
3095
  .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
3096
- color: var(--seed-color-fg-magic-contrast);
3096
+ color: var(--seed-color-fg-neutral);
3097
3097
  }
3098
3098
 
3099
3099
  .seed-manner-temp {
@@ -4112,7 +4112,6 @@
4112
4112
 
4113
4113
  .seed-skeleton {
4114
4114
  box-sizing: border-box;
4115
- background: var(--seed-color-palette-gray-200);
4116
4115
  --seed-box-width: initial;
4117
4116
  --seed-box-height: initial;
4118
4117
  width: var(--seed-box-width);
@@ -4123,7 +4122,6 @@
4123
4122
 
4124
4123
  .seed-skeleton:after {
4125
4124
  content: "";
4126
- background-image: linear-gradient(90deg, var(--seed-gradient-shimmer));
4127
4125
  width: 100%;
4128
4126
  height: 100%;
4129
4127
  animation-name: slide-x;
@@ -4151,6 +4149,22 @@
4151
4149
  border-radius: var(--seed-radius-full);
4152
4150
  }
4153
4151
 
4152
+ .seed-skeleton--tone_neutral {
4153
+ background: var(--seed-color-palette-gray-200);
4154
+ }
4155
+
4156
+ .seed-skeleton--tone_neutral:after {
4157
+ background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
4158
+ }
4159
+
4160
+ .seed-skeleton--tone_magic {
4161
+ background: var(--seed-color-bg-magic-weak);
4162
+ }
4163
+
4164
+ .seed-skeleton--tone_magic:after {
4165
+ background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
4166
+ }
4167
+
4154
4168
  .seed-snackbar__root {
4155
4169
  box-sizing: border-box;
4156
4170
  background: var(--seed-color-bg-neutral-solid);
@@ -4455,6 +4469,14 @@
4455
4469
  overflow: hidden;
4456
4470
  }
4457
4471
 
4472
+ .seed-text--textDecorationLine_none {
4473
+ text-decoration-line: none;
4474
+ }
4475
+
4476
+ .seed-text--textDecorationLine_line-through {
4477
+ text-decoration-line: line-through;
4478
+ }
4479
+
4458
4480
  .seed-link-content {
4459
4481
  cursor: pointer;
4460
4482
  box-sizing: border-box;