@sproutsocial/racine 31.7.15 → 31.7.18
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.
- package/CHANGELOG.md +151 -0
- package/README.NPM.md +1 -1
- package/README.md +19 -3
- package/dist/components.css +1109 -749
- package/package.json +67 -67
package/dist/components.css
CHANGED
|
@@ -98,7 +98,8 @@
|
|
|
98
98
|
background: var(--color-container-bg-base);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.accordion-item[data-state="open"]
|
|
101
|
+
.accordion-item[data-state="open"]
|
|
102
|
+
.seeds-accordion-trigger[data-styled="true"] {
|
|
102
103
|
border-bottom: 1px solid transparent;
|
|
103
104
|
}
|
|
104
105
|
|
|
@@ -511,7 +512,12 @@
|
|
|
511
512
|
* Usage:
|
|
512
513
|
* <button class="seeds-btn seeds-btn-primary">Click me</button>
|
|
513
514
|
* <button class="seeds-btn seeds-btn-primary seeds-btn-lg">Large</button>
|
|
514
|
-
* <button class="seeds-btn seeds-btn-primary seeds-btn-disabled" disabled>Disabled</button>
|
|
515
|
+
* <button class="seeds-btn seeds-btn-primary seeds-btn-disabled" aria-disabled="true">Disabled</button>
|
|
516
|
+
*
|
|
517
|
+
* Use aria-disabled, not the HTML disabled attribute — .seeds-btn-disabled
|
|
518
|
+
* intentionally omits pointer-events: none so hover/cursor feedback still
|
|
519
|
+
* reaches the element; a real disabled attribute would suppress those events
|
|
520
|
+
* regardless of this class.
|
|
515
521
|
*
|
|
516
522
|
* All rules are wrapped in `@layer components` so that:
|
|
517
523
|
* 1. Consumer Tailwind utilities (unlayered) win the cascade over these styles.
|
|
@@ -521,7 +527,6 @@
|
|
|
521
527
|
*/
|
|
522
528
|
|
|
523
529
|
@layer components {
|
|
524
|
-
|
|
525
530
|
.seeds-btn {
|
|
526
531
|
display: inline-block;
|
|
527
532
|
box-sizing: border-box;
|
|
@@ -532,11 +537,14 @@
|
|
|
532
537
|
border-radius: var(--radius-500);
|
|
533
538
|
cursor: pointer;
|
|
534
539
|
text-decoration: none;
|
|
535
|
-
line
|
|
540
|
+
/* Matches Icon's default line height, and the overall height of Input and
|
|
541
|
+
Select. Absolute, not 1rem, so a host app's root font-size can't shift it. */
|
|
542
|
+
line-height: 16px;
|
|
536
543
|
white-space: nowrap;
|
|
537
544
|
font-weight: var(--font-weight-bold);
|
|
538
545
|
transition-property: all;
|
|
539
546
|
transition-duration: var(--duration-fast);
|
|
547
|
+
transition-timing-function: linear;
|
|
540
548
|
margin: 0;
|
|
541
549
|
padding: var(--space-300);
|
|
542
550
|
font-size: var(--font-size-200);
|
|
@@ -544,9 +552,44 @@
|
|
|
544
552
|
|
|
545
553
|
.seeds-btn:focus {
|
|
546
554
|
outline: none;
|
|
547
|
-
box-shadow:
|
|
548
|
-
0 0 0
|
|
549
|
-
|
|
555
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
556
|
+
0 0 0 4px
|
|
557
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* Firefox draws its own inner focus border on buttons; suppress it so only the
|
|
561
|
+
box-shadow ring above shows. */
|
|
562
|
+
.seeds-btn::-moz-focus-inner {
|
|
563
|
+
border: 0;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Clear the focus ring once the pointer is over the button or it is being
|
|
567
|
+
pressed, so the ring reads as keyboard-only feedback. Appearances that want a
|
|
568
|
+
shadow on hover (placeholder, pill) re-declare box-shadow at equal specificity
|
|
569
|
+
later in this file and win on source order. */
|
|
570
|
+
.seeds-btn:hover {
|
|
571
|
+
box-shadow: none;
|
|
572
|
+
/* Re-asserted on hover so a later `a:hover` rule in this layer cannot
|
|
573
|
+
underline a link-rendered button. */
|
|
574
|
+
text-decoration: none;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.seeds-btn:focus:active {
|
|
578
|
+
box-shadow: none;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/**
|
|
582
|
+
* Icon defaults to `vertical-align: middle`, which sits an icon slightly high
|
|
583
|
+
* against a bold button label. Pin it to the text baseline instead.
|
|
584
|
+
*
|
|
585
|
+
* Targets `.Icon` because both Icon render paths carry that class. Note this
|
|
586
|
+
* only reaches the Tailwind Icon: an Icon given `color` or system props routes
|
|
587
|
+
* to the styled-components path, whose unlayered styles outrank anything in
|
|
588
|
+
* `@layer components` regardless of specificity. That gap closes when Icon
|
|
589
|
+
* drops its styled-components path.
|
|
590
|
+
*/
|
|
591
|
+
.seeds-btn .Icon {
|
|
592
|
+
vertical-align: text-bottom;
|
|
550
593
|
}
|
|
551
594
|
|
|
552
595
|
/* KNOWN ISSUE: `small` currently renders identically to the default size — both use
|
|
@@ -579,8 +622,12 @@
|
|
|
579
622
|
color: var(--color-button-primary-text-hover);
|
|
580
623
|
}
|
|
581
624
|
|
|
625
|
+
/* `:active` sets the hover text color as well as the active background. Without
|
|
626
|
+
the color, a keyboard press (Space/Enter fires `:active` with no `:hover`) puts
|
|
627
|
+
base-colored text on the active background. */
|
|
582
628
|
.seeds-btn-primary:active {
|
|
583
629
|
background-color: var(--color-button-primary-bg-active);
|
|
630
|
+
color: var(--color-button-primary-text-hover);
|
|
584
631
|
}
|
|
585
632
|
|
|
586
633
|
.seeds-btn-secondary {
|
|
@@ -596,6 +643,7 @@
|
|
|
596
643
|
|
|
597
644
|
.seeds-btn-secondary:active {
|
|
598
645
|
background-color: var(--color-button-secondary-bg-active);
|
|
646
|
+
color: var(--color-button-secondary-text-hover);
|
|
599
647
|
}
|
|
600
648
|
|
|
601
649
|
.seeds-btn-destructive {
|
|
@@ -611,6 +659,7 @@
|
|
|
611
659
|
|
|
612
660
|
.seeds-btn-destructive:active {
|
|
613
661
|
background-color: var(--color-button-destructive-bg-active);
|
|
662
|
+
color: var(--color-button-destructive-text-hover);
|
|
614
663
|
}
|
|
615
664
|
|
|
616
665
|
.seeds-btn-placeholder {
|
|
@@ -620,9 +669,17 @@
|
|
|
620
669
|
border-style: dashed;
|
|
621
670
|
}
|
|
622
671
|
|
|
672
|
+
/* Placeholder is the one appearance that lifts on hover instead of clearing its
|
|
673
|
+
shadow. Declared after `.seeds-btn:hover` so it wins on source order. */
|
|
623
674
|
.seeds-btn-placeholder:hover {
|
|
624
675
|
background-color: var(--color-button-placeholder-bg-hover);
|
|
625
676
|
color: var(--color-button-placeholder-text-hover);
|
|
677
|
+
box-shadow: var(--shadow-low);
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.seeds-btn-placeholder:active {
|
|
681
|
+
background-color: var(--color-button-placeholder-bg-active);
|
|
682
|
+
color: var(--color-button-placeholder-text-hover);
|
|
626
683
|
}
|
|
627
684
|
|
|
628
685
|
.seeds-btn-unstyled {
|
|
@@ -635,6 +692,11 @@
|
|
|
635
692
|
color: var(--color-button-unstyled-text-hover);
|
|
636
693
|
}
|
|
637
694
|
|
|
695
|
+
/* unstyled has no active background token, so only the text color changes */
|
|
696
|
+
.seeds-btn-unstyled:active {
|
|
697
|
+
color: var(--color-button-unstyled-text-hover);
|
|
698
|
+
}
|
|
699
|
+
|
|
638
700
|
/* AI brand appearances — built on the shared --color-gradient-ai* tokens.
|
|
639
701
|
Rendered only via this Tailwind/CSS path (see ButtonHybrid routing guard). */
|
|
640
702
|
.seeds-btn-ai-primary {
|
|
@@ -676,8 +738,7 @@
|
|
|
676
738
|
border-radius: inherit;
|
|
677
739
|
padding: 1px;
|
|
678
740
|
background: var(--color-gradient-ai);
|
|
679
|
-
-webkit-mask:
|
|
680
|
-
linear-gradient(#fff 0 0) content-box,
|
|
741
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
|
681
742
|
linear-gradient(#fff 0 0);
|
|
682
743
|
-webkit-mask-composite: xor;
|
|
683
744
|
mask-composite: exclude;
|
|
@@ -717,10 +778,23 @@
|
|
|
717
778
|
color: var(--color-button-unstyled-text-hover);
|
|
718
779
|
}
|
|
719
780
|
|
|
781
|
+
/**
|
|
782
|
+
* `.seeds-interactive-disabled` is a pure-CSS mixin for disabling interactive
|
|
783
|
+
* elements (buttons, links, controls) that use `aria-disabled="true"` instead
|
|
784
|
+
* of the HTML `disabled` attribute — the CSS equivalent of the
|
|
785
|
+
* `interactiveDisabled` styled-components mixin in `@sproutsocial/seeds-react-mixins`
|
|
786
|
+
* (now deprecated in favor of this). Grouped into the same rule as
|
|
787
|
+
* `.seeds-btn-disabled` so there's one declaration to keep in sync, not two.
|
|
788
|
+
*
|
|
789
|
+
* Intentionally omits `pointer-events: none` so click events still reach the
|
|
790
|
+
* element's JS handler, where they can be suppressed and optionally used to
|
|
791
|
+
* show feedback (e.g. a tooltip). Any other pure-CSS component with the same
|
|
792
|
+
* aria-disabled pattern can adopt `.seeds-interactive-disabled` directly.
|
|
793
|
+
*/
|
|
794
|
+
.seeds-interactive-disabled,
|
|
720
795
|
.seeds-btn-disabled {
|
|
721
|
-
opacity: 0.
|
|
796
|
+
opacity: 0.4;
|
|
722
797
|
cursor: not-allowed;
|
|
723
|
-
pointer-events: none;
|
|
724
798
|
}
|
|
725
799
|
|
|
726
800
|
.seeds-btn-pill {
|
|
@@ -728,7 +802,10 @@
|
|
|
728
802
|
align-items: center;
|
|
729
803
|
justify-content: center;
|
|
730
804
|
background-color: transparent;
|
|
731
|
-
border
|
|
805
|
+
/* Keeps the base 1px border and just recolors it (the token is transparent),
|
|
806
|
+
rather than removing it. `border: none` zeroed the width, growing the content
|
|
807
|
+
box 2px on each axis relative to every other appearance. */
|
|
808
|
+
border-color: var(--color-button-pill-border-base);
|
|
732
809
|
border-radius: var(--radius-pill);
|
|
733
810
|
min-width: var(--space-600);
|
|
734
811
|
min-height: var(--space-600);
|
|
@@ -747,10 +824,10 @@
|
|
|
747
824
|
color: var(--color-button-pill-text-hover);
|
|
748
825
|
background-color: var(--color-button-pill-bg-active);
|
|
749
826
|
}
|
|
750
|
-
|
|
751
827
|
}
|
|
752
828
|
|
|
753
829
|
/* end @layer components */
|
|
830
|
+
|
|
754
831
|
/* --- seeds-react-character-counter --- */
|
|
755
832
|
/**
|
|
756
833
|
* Seeds CharacterCounter component classes
|
|
@@ -1018,9 +1095,9 @@
|
|
|
1018
1095
|
|
|
1019
1096
|
.seeds-content-header-trigger:focus-visible {
|
|
1020
1097
|
outline: none;
|
|
1021
|
-
box-shadow:
|
|
1022
|
-
0 0 0
|
|
1023
|
-
|
|
1098
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
1099
|
+
0 0 0 4px
|
|
1100
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
1024
1101
|
}
|
|
1025
1102
|
}
|
|
1026
1103
|
|
|
@@ -1184,8 +1261,12 @@
|
|
|
1184
1261
|
transform: translateX(-100%);
|
|
1185
1262
|
}
|
|
1186
1263
|
|
|
1187
|
-
.seeds-drawer-popup--bottom:not(
|
|
1188
|
-
|
|
1264
|
+
.seeds-drawer-popup--bottom:not(
|
|
1265
|
+
.seeds-drawer-popup--snap
|
|
1266
|
+
)[data-starting-style],
|
|
1267
|
+
.seeds-drawer-popup--bottom:not(
|
|
1268
|
+
.seeds-drawer-popup--snap
|
|
1269
|
+
)[data-ending-style] {
|
|
1189
1270
|
transform: translateY(calc(100% - var(--bleed) + 2px));
|
|
1190
1271
|
}
|
|
1191
1272
|
|
|
@@ -1199,8 +1280,12 @@
|
|
|
1199
1280
|
RAIL_OFFSET). Translating the popup by its own height alone leaves the rail
|
|
1200
1281
|
visible at the bottom of the viewport during enter/exit, so we add the rail's
|
|
1201
1282
|
outset: RAIL_BUTTON_HEIGHT (32) + RAIL_OFFSET (12) = 44px. */
|
|
1202
|
-
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1203
|
-
|
|
1283
|
+
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1284
|
+
.seeds-drawer-popup--snap
|
|
1285
|
+
)[data-starting-style],
|
|
1286
|
+
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1287
|
+
.seeds-drawer-popup--snap
|
|
1288
|
+
)[data-ending-style] {
|
|
1204
1289
|
transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
|
|
1205
1290
|
}
|
|
1206
1291
|
|
|
@@ -1226,7 +1311,9 @@
|
|
|
1226
1311
|
/* Bottom non-snap stacked bottom-sheet animation. Snap-point drawers don't
|
|
1227
1312
|
participate: the stack math overwrites --translate-y and clips overflow,
|
|
1228
1313
|
which collides with base-ui's snap-offset transform. */
|
|
1229
|
-
.seeds-drawer-popup--bottom:not(
|
|
1314
|
+
.seeds-drawer-popup--bottom:not(
|
|
1315
|
+
.seeds-drawer-popup--snap
|
|
1316
|
+
)[data-nested-drawer-open] {
|
|
1230
1317
|
--stack-step: 0.05;
|
|
1231
1318
|
--stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
|
|
1232
1319
|
/* Override default vars; base transform rule picks them up automatically */
|
|
@@ -1627,6 +1714,44 @@
|
|
|
1627
1714
|
.seeds-icon-fixed-width .Icon-svg {
|
|
1628
1715
|
width: var(--icon-size);
|
|
1629
1716
|
}
|
|
1717
|
+
|
|
1718
|
+
/**
|
|
1719
|
+
* AI gradient fill — paint any icon with the AI brand gradient instead of
|
|
1720
|
+
* currentColor, so AI surfaces don't need a bespoke `*-gradient-*.svg` export
|
|
1721
|
+
* per icon.
|
|
1722
|
+
*
|
|
1723
|
+
* <Icon name="sparkle-solid" className="seeds-icon-gradient-ai" />
|
|
1724
|
+
*
|
|
1725
|
+
* Scoped to .Icon-svg rather than .seeds-icon so it works on both render paths:
|
|
1726
|
+
* the styled-components Container only carries the `Icon` class, not `seeds-icon`.
|
|
1727
|
+
*
|
|
1728
|
+
* The `#9747ff` after the url() is SVG paint fallback syntax, not a second
|
|
1729
|
+
* declaration. It covers the frame between first paint and IconHybrid's effect
|
|
1730
|
+
* appending the <radialGradient> defs — an unresolvable paint server would
|
|
1731
|
+
* otherwise render the glyph as nothing. It is the gradient's mid stop, so the
|
|
1732
|
+
* fallback reads as a flat AI purple rather than a miss.
|
|
1733
|
+
*/
|
|
1734
|
+
.seeds-icon-gradient-ai .Icon-svg {
|
|
1735
|
+
fill: url(#seeds-gradient-ai) #9747ff;
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
/**
|
|
1739
|
+
* Stop colors for the injected paint server (see gradientDefs.ts). These live in
|
|
1740
|
+
* CSS rather than on the <stop> elements because var() does not resolve inside
|
|
1741
|
+
* SVG presentation attributes — putting them here is what makes gradient icons
|
|
1742
|
+
* respond to dark mode via the theme's .dark variable swap.
|
|
1743
|
+
*/
|
|
1744
|
+
.seeds-gradient-ai-stop-1 {
|
|
1745
|
+
stop-color: var(--color-gradient-ai-stop-1);
|
|
1746
|
+
}
|
|
1747
|
+
|
|
1748
|
+
.seeds-gradient-ai-stop-2 {
|
|
1749
|
+
stop-color: var(--color-gradient-ai-stop-2);
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
.seeds-gradient-ai-stop-3 {
|
|
1753
|
+
stop-color: var(--color-gradient-ai-stop-3);
|
|
1754
|
+
}
|
|
1630
1755
|
}
|
|
1631
1756
|
|
|
1632
1757
|
/* --- seeds-react-image --- */
|
|
@@ -1714,8 +1839,7 @@
|
|
|
1714
1839
|
background-color: var(--color-form-bg-base);
|
|
1715
1840
|
color: var(--color-text-body);
|
|
1716
1841
|
outline: none;
|
|
1717
|
-
transition:
|
|
1718
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
1842
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
1719
1843
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
1720
1844
|
font-family: var(--font-family);
|
|
1721
1845
|
font-weight: var(--font-weight-normal);
|
|
@@ -1741,9 +1865,9 @@
|
|
|
1741
1865
|
|
|
1742
1866
|
.seeds-input input:focus {
|
|
1743
1867
|
outline: none;
|
|
1744
|
-
box-shadow:
|
|
1745
|
-
0 0 0
|
|
1746
|
-
|
|
1868
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
1869
|
+
0 0 0 4px
|
|
1870
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
1747
1871
|
}
|
|
1748
1872
|
|
|
1749
1873
|
/* Fix for red ring when input is marked required in Firefox */
|
|
@@ -1905,9 +2029,9 @@
|
|
|
1905
2029
|
|
|
1906
2030
|
.seeds-link:focus {
|
|
1907
2031
|
outline: none;
|
|
1908
|
-
box-shadow:
|
|
1909
|
-
0 0 0
|
|
1910
|
-
|
|
2032
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
2033
|
+
0 0 0 4px
|
|
2034
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
1911
2035
|
}
|
|
1912
2036
|
|
|
1913
2037
|
.seeds-link:focus:active {
|
|
@@ -2095,31 +2219,29 @@
|
|
|
2095
2219
|
*/
|
|
2096
2220
|
|
|
2097
2221
|
@layer components {
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
/* Subtle (default): the 20% AI gradient tint composited over the base
|
|
2222
|
+
.seeds-ai-container {
|
|
2223
|
+
position: relative;
|
|
2224
|
+
overflow: hidden;
|
|
2225
|
+
box-sizing: border-box;
|
|
2226
|
+
border-radius: var(--radius-800);
|
|
2227
|
+
box-shadow: var(--shadow-low);
|
|
2228
|
+
font-family: var(--font-family);
|
|
2229
|
+
/* Subtle (default): the 20% AI gradient tint composited over the base
|
|
2107
2230
|
surface. --color-gradient-ai-subtle is already translucent, so layering it
|
|
2108
2231
|
over the opaque base color produces the soft wash. */
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
}
|
|
2232
|
+
background-color: var(--color-container-bg-base);
|
|
2233
|
+
background-image: var(--color-gradient-ai-subtle);
|
|
2234
|
+
color: var(--color-text-headline);
|
|
2235
|
+
}
|
|
2113
2236
|
|
|
2114
|
-
/* Vivid: the full-saturation AI gradient with white content. White has no
|
|
2237
|
+
/* Vivid: the full-saturation AI gradient with white content. White has no
|
|
2115
2238
|
semantic Seeds token; it is part of the AI gradient treatment (mirrors the
|
|
2116
2239
|
raw brand hex used in --color-gradient-ai). */
|
|
2117
|
-
.seeds-ai-container-vivid {
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
}
|
|
2122
|
-
|
|
2240
|
+
.seeds-ai-container-vivid {
|
|
2241
|
+
background-color: transparent;
|
|
2242
|
+
background-image: var(--color-gradient-ai);
|
|
2243
|
+
color: #fff;
|
|
2244
|
+
}
|
|
2123
2245
|
}
|
|
2124
2246
|
|
|
2125
2247
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2135,30 +2257,28 @@
|
|
|
2135
2257
|
*/
|
|
2136
2258
|
|
|
2137
2259
|
@layer components {
|
|
2138
|
-
|
|
2139
|
-
/* A solid gray pill matching the design: background and border are both the
|
|
2260
|
+
/* A solid gray pill matching the design: background and border are both the
|
|
2140
2261
|
#dee1e1 container-border-base token, which also tracks dark mode. The two
|
|
2141
2262
|
pixel literals below have no exact theme token — the --space scale skips 6px
|
|
2142
2263
|
(4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
|
|
2143
2264
|
values are kept verbatim. All colors use tokens. */
|
|
2144
|
-
.seeds-eyebrow-token {
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
}
|
|
2161
|
-
|
|
2265
|
+
.seeds-eyebrow-token {
|
|
2266
|
+
box-sizing: border-box;
|
|
2267
|
+
display: inline-flex;
|
|
2268
|
+
align-items: center;
|
|
2269
|
+
justify-content: center;
|
|
2270
|
+
gap: var(--space-100); /* 2px */
|
|
2271
|
+
padding: var(--space-100) var(--space-300); /* 2px / 8px */
|
|
2272
|
+
border: 1px solid var(--color-container-border-base); /* #dee1e1 */
|
|
2273
|
+
border-radius: var(--radius-500); /* 6px */
|
|
2274
|
+
background-color: var(--color-container-border-base); /* #dee1e1 */
|
|
2275
|
+
font-family: var(--font-family);
|
|
2276
|
+
font-size: 12px; /* text-sm */
|
|
2277
|
+
line-height: 20px;
|
|
2278
|
+
font-weight: var(--font-weight-normal);
|
|
2279
|
+
color: var(--color-text-body);
|
|
2280
|
+
white-space: nowrap;
|
|
2281
|
+
}
|
|
2162
2282
|
}
|
|
2163
2283
|
|
|
2164
2284
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2177,167 +2297,175 @@
|
|
|
2177
2297
|
*/
|
|
2178
2298
|
|
|
2179
2299
|
@layer components {
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
2300
|
+
.seeds-metric-highlight {
|
|
2301
|
+
box-sizing: border-box;
|
|
2302
|
+
display: flex;
|
|
2303
|
+
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
2185
2304
|
can't sit side by side (narrow cards / mobile). The metric block claims its
|
|
2186
2305
|
min-content width below, so a cramped row drops the chart down rather than
|
|
2187
2306
|
overflowing the card and getting clipped by the container. */
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2307
|
+
flex-wrap: wrap;
|
|
2308
|
+
align-items: flex-start;
|
|
2309
|
+
gap: var(--space-350); /* 12px */
|
|
2310
|
+
border-radius: var(--radius-800); /* 12px */
|
|
2311
|
+
font-family: var(--font-family);
|
|
2312
|
+
/* Container (default): a padded gray app surface (matches the design's
|
|
2194
2313
|
#f3f4f4 box). `-bare` strips it. */
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
}
|
|
2314
|
+
padding: var(--space-400) var(--space-450); /* 16px / 24px */
|
|
2315
|
+
background-color: var(--color-app-bg-base);
|
|
2316
|
+
}
|
|
2198
2317
|
|
|
2199
|
-
.seeds-metric-highlight-bare {
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
}
|
|
2318
|
+
.seeds-metric-highlight-bare {
|
|
2319
|
+
padding: 0;
|
|
2320
|
+
background-color: transparent;
|
|
2321
|
+
}
|
|
2203
2322
|
|
|
2204
|
-
.seeds-metric-highlight-vertical {
|
|
2205
|
-
|
|
2206
|
-
}
|
|
2323
|
+
.seeds-metric-highlight-vertical {
|
|
2324
|
+
flex-direction: column;
|
|
2325
|
+
}
|
|
2207
2326
|
|
|
2208
|
-
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
2209
|
-
.seeds-metric-highlight-metric {
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2327
|
+
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
2328
|
+
.seeds-metric-highlight-metric {
|
|
2329
|
+
box-sizing: border-box;
|
|
2330
|
+
display: flex;
|
|
2331
|
+
flex-direction: column;
|
|
2332
|
+
align-items: flex-start;
|
|
2333
|
+
gap: var(--space-200); /* 4px */
|
|
2334
|
+
/* Grow to fill the row, but never shrink below the metric's own content
|
|
2216
2335
|
(the nowrap value + trend pill). That min-content floor is what forces the
|
|
2217
2336
|
chart to wrap below on narrow cards instead of the row overflowing. */
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
}
|
|
2337
|
+
flex: 1 1 auto;
|
|
2338
|
+
min-width: min-content;
|
|
2339
|
+
}
|
|
2221
2340
|
|
|
2222
|
-
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
}
|
|
2341
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
2342
|
+
width: 100%;
|
|
2343
|
+
flex: 0 0 auto;
|
|
2344
|
+
}
|
|
2226
2345
|
|
|
2227
|
-
/* Small: label and value collapse onto a single centered row. */
|
|
2228
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
}
|
|
2346
|
+
/* Small: label and value collapse onto a single centered row. */
|
|
2347
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
2348
|
+
flex-direction: row;
|
|
2349
|
+
align-items: center;
|
|
2350
|
+
gap: var(--space-300); /* 8px */
|
|
2351
|
+
}
|
|
2233
2352
|
|
|
2234
|
-
.seeds-metric-highlight-label {
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
}
|
|
2353
|
+
.seeds-metric-highlight-label {
|
|
2354
|
+
margin: 0;
|
|
2355
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2356
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
2357
|
+
font-weight: var(--font-weight-normal);
|
|
2358
|
+
color: var(--color-text-body);
|
|
2359
|
+
overflow-wrap: break-word;
|
|
2360
|
+
}
|
|
2242
2361
|
|
|
2243
|
-
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
2244
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
}
|
|
2362
|
+
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
2363
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
2364
|
+
flex: 1 0 0;
|
|
2365
|
+
min-width: 0;
|
|
2366
|
+
}
|
|
2248
2367
|
|
|
2249
|
-
.seeds-metric-highlight-value-row {
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
}
|
|
2368
|
+
.seeds-metric-highlight-value-row {
|
|
2369
|
+
display: flex;
|
|
2370
|
+
flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
|
|
2371
|
+
align-items: center;
|
|
2372
|
+
gap: var(--space-300); /* 8px */
|
|
2373
|
+
}
|
|
2255
2374
|
|
|
2256
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
2257
|
-
|
|
2258
|
-
}
|
|
2375
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
2376
|
+
justify-content: flex-end;
|
|
2377
|
+
}
|
|
2259
2378
|
|
|
2260
|
-
.seeds-metric-highlight-value {
|
|
2261
|
-
|
|
2262
|
-
|
|
2379
|
+
.seeds-metric-highlight-value {
|
|
2380
|
+
margin: 0;
|
|
2381
|
+
/* No mono token exists yet; fall back to a system monospace stack. Mirrors the
|
|
2263
2382
|
font/font-mono treatment in the design. */
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2383
|
+
font-family: var(
|
|
2384
|
+
--font-family-mono,
|
|
2385
|
+
ui-monospace,
|
|
2386
|
+
"SF Mono",
|
|
2387
|
+
SFMono-Regular,
|
|
2388
|
+
Menlo,
|
|
2389
|
+
monospace
|
|
2390
|
+
);
|
|
2391
|
+
font-size: var(--font-size-700); /* 32px */
|
|
2392
|
+
line-height: var(--line-height-700); /* 40px */
|
|
2393
|
+
font-weight: var(--font-weight-bold);
|
|
2394
|
+
color: var(--color-text-headline);
|
|
2395
|
+
white-space: nowrap;
|
|
2396
|
+
}
|
|
2271
2397
|
|
|
2272
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-value {
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
}
|
|
2398
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value {
|
|
2399
|
+
font-size: var(--font-size-600); /* 24px */
|
|
2400
|
+
line-height: var(--line-height-600); /* 32px */
|
|
2401
|
+
}
|
|
2276
2402
|
|
|
2277
|
-
/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
|
|
2403
|
+
/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
|
|
2278
2404
|
swaps to the negative (red) treatment. Color flows to the arrow + value via
|
|
2279
2405
|
currentColor. */
|
|
2280
|
-
.seeds-metric-highlight-trend {
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
}
|
|
2406
|
+
.seeds-metric-highlight-trend {
|
|
2407
|
+
display: inline-flex;
|
|
2408
|
+
align-items: center;
|
|
2409
|
+
gap: var(--space-200); /* 4px */
|
|
2410
|
+
padding: var(--space-100) var(--space-300); /* 2px / 8px */
|
|
2411
|
+
border-radius: 999px;
|
|
2412
|
+
font-size: var(--font-size-200); /* 13px */
|
|
2413
|
+
line-height: var(--line-height-200);
|
|
2414
|
+
font-weight: var(--font-weight-bold);
|
|
2415
|
+
white-space: nowrap;
|
|
2416
|
+
background-color: var(--color-container-bg-decorative-green);
|
|
2417
|
+
color: var(--color-text-decorative-green);
|
|
2418
|
+
}
|
|
2293
2419
|
|
|
2294
|
-
.seeds-metric-highlight-trend-down {
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
}
|
|
2420
|
+
.seeds-metric-highlight-trend-down {
|
|
2421
|
+
background-color: var(--color-container-bg-decorative-red);
|
|
2422
|
+
color: var(--color-text-decorative-red);
|
|
2423
|
+
}
|
|
2298
2424
|
|
|
2299
|
-
.seeds-metric-highlight-trend-arrow {
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
}
|
|
2425
|
+
.seeds-metric-highlight-trend-arrow {
|
|
2426
|
+
flex: 0 0 auto;
|
|
2427
|
+
width: 1em;
|
|
2428
|
+
height: 1em;
|
|
2429
|
+
stroke: currentColor;
|
|
2430
|
+
stroke-width: 1.5;
|
|
2431
|
+
}
|
|
2306
2432
|
|
|
2307
|
-
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
2433
|
+
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
2308
2434
|
stroke/background styling, so the injected chart controls its own look. Heights
|
|
2309
2435
|
are explicit (never percentage/stretch) so a Highcharts chart always measures a
|
|
2310
2436
|
concrete container instead of falling back to its 400px default. */
|
|
2311
|
-
.seeds-metric-highlight-chart {
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2437
|
+
.seeds-metric-highlight-chart {
|
|
2438
|
+
box-sizing: border-box;
|
|
2439
|
+
flex: 0 0 auto;
|
|
2440
|
+
align-self: center;
|
|
2441
|
+
/* Center the injected chart as a flex item — an inline/inline-block child
|
|
2316
2442
|
(e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
|
|
2317
2443
|
descender space below it, reading as vertically off-center in the slot. */
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
}
|
|
2321
|
-
|
|
2322
|
-
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
|
|
2323
|
-
width: 104px;
|
|
2324
|
-
height: 48px;
|
|
2325
|
-
}
|
|
2444
|
+
display: flex;
|
|
2445
|
+
align-items: center;
|
|
2446
|
+
}
|
|
2326
2447
|
|
|
2327
|
-
.seeds-metric-highlight
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2448
|
+
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
|
|
2449
|
+
.seeds-metric-highlight-chart {
|
|
2450
|
+
width: 104px;
|
|
2451
|
+
height: 48px;
|
|
2452
|
+
}
|
|
2331
2453
|
|
|
2332
|
-
.seeds-metric-highlight-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2454
|
+
.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
|
|
2455
|
+
.seeds-metric-highlight-chart {
|
|
2456
|
+
width: 88px;
|
|
2457
|
+
height: 40px;
|
|
2458
|
+
}
|
|
2336
2459
|
|
|
2337
|
-
.seeds-metric-highlight-vertical
|
|
2338
|
-
|
|
2339
|
-
|
|
2460
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
|
|
2461
|
+
width: 100%;
|
|
2462
|
+
height: 96px;
|
|
2463
|
+
}
|
|
2340
2464
|
|
|
2465
|
+
.seeds-metric-highlight-vertical.seeds-metric-highlight-small
|
|
2466
|
+
.seeds-metric-highlight-chart {
|
|
2467
|
+
height: 56px;
|
|
2468
|
+
}
|
|
2341
2469
|
}
|
|
2342
2470
|
|
|
2343
2471
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2357,45 +2485,43 @@
|
|
|
2357
2485
|
*/
|
|
2358
2486
|
|
|
2359
2487
|
@layer components {
|
|
2488
|
+
/* Main container — horizontal layout with avatar, social icon, and user name. */
|
|
2489
|
+
.seeds-narrative-attribution {
|
|
2490
|
+
box-sizing: border-box;
|
|
2491
|
+
display: flex;
|
|
2492
|
+
align-items: center;
|
|
2493
|
+
gap: var(--space-300); /* 8px */
|
|
2494
|
+
font-family: var(--font-family);
|
|
2495
|
+
}
|
|
2360
2496
|
|
|
2361
|
-
/*
|
|
2362
|
-
.seeds-narrative-attribution {
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
}
|
|
2369
|
-
|
|
2370
|
-
/* Circular avatar image — fixed size with rounded corners. */
|
|
2371
|
-
.seeds-narrative-attribution-avatar {
|
|
2372
|
-
width: var(--space-450); /* 24px */
|
|
2373
|
-
height: var(--space-450); /* 24px */
|
|
2374
|
-
border-radius: var(--radius-circular); /* 50% */
|
|
2375
|
-
object-fit: cover;
|
|
2376
|
-
flex-shrink: 0;
|
|
2377
|
-
}
|
|
2378
|
-
|
|
2379
|
-
/* Social network icon container — flexible sizing for partner logos. */
|
|
2380
|
-
.seeds-narrative-attribution-social-icon {
|
|
2381
|
-
flex-shrink: 0;
|
|
2382
|
-
display: flex;
|
|
2383
|
-
align-items: center;
|
|
2384
|
-
justify-content: center;
|
|
2385
|
-
}
|
|
2497
|
+
/* Circular avatar image — fixed size with rounded corners. */
|
|
2498
|
+
.seeds-narrative-attribution-avatar {
|
|
2499
|
+
width: var(--space-450); /* 24px */
|
|
2500
|
+
height: var(--space-450); /* 24px */
|
|
2501
|
+
border-radius: var(--radius-circular); /* 50% */
|
|
2502
|
+
object-fit: cover;
|
|
2503
|
+
flex-shrink: 0;
|
|
2504
|
+
}
|
|
2386
2505
|
|
|
2387
|
-
/*
|
|
2388
|
-
.seeds-narrative-attribution-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
font-style: normal;
|
|
2395
|
-
font-weight: var(--font-weight-bold, 700);
|
|
2396
|
-
line-height: var(--text-base-line-height, 24px);
|
|
2397
|
-
}
|
|
2506
|
+
/* Social network icon container — flexible sizing for partner logos. */
|
|
2507
|
+
.seeds-narrative-attribution-social-icon {
|
|
2508
|
+
flex-shrink: 0;
|
|
2509
|
+
display: flex;
|
|
2510
|
+
align-items: center;
|
|
2511
|
+
justify-content: center;
|
|
2512
|
+
}
|
|
2398
2513
|
|
|
2514
|
+
/* User name text — bold headline text with ellipsis overflow. */
|
|
2515
|
+
.seeds-narrative-attribution-user-name {
|
|
2516
|
+
overflow: hidden;
|
|
2517
|
+
color: var(--color-text-headline);
|
|
2518
|
+
text-overflow: ellipsis;
|
|
2519
|
+
font-family: var(--font-family);
|
|
2520
|
+
font-size: var(--text-base-font-size, 14px);
|
|
2521
|
+
font-style: normal;
|
|
2522
|
+
font-weight: var(--font-weight-bold, 700);
|
|
2523
|
+
line-height: var(--text-base-line-height, 24px);
|
|
2524
|
+
}
|
|
2399
2525
|
}
|
|
2400
2526
|
|
|
2401
2527
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2411,22 +2537,21 @@
|
|
|
2411
2537
|
*/
|
|
2412
2538
|
|
|
2413
2539
|
@layer components {
|
|
2540
|
+
.seeds-narrative-container {
|
|
2541
|
+
position: relative;
|
|
2542
|
+
overflow: hidden;
|
|
2543
|
+
box-sizing: border-box;
|
|
2544
|
+
display: flex;
|
|
2545
|
+
flex-direction: column;
|
|
2546
|
+
align-items: stretch;
|
|
2547
|
+
padding: var(--space-500);
|
|
2548
|
+
border-radius: var(--radius-800);
|
|
2549
|
+
box-shadow: var(--shadow-low);
|
|
2550
|
+
background-color: var(--color-container-bg-base);
|
|
2551
|
+
font-family: var(--font-family);
|
|
2552
|
+
}
|
|
2414
2553
|
|
|
2415
|
-
|
|
2416
|
-
position: relative;
|
|
2417
|
-
overflow: hidden;
|
|
2418
|
-
box-sizing: border-box;
|
|
2419
|
-
display: flex;
|
|
2420
|
-
flex-direction: column;
|
|
2421
|
-
align-items: stretch;
|
|
2422
|
-
padding: var(--space-500);
|
|
2423
|
-
border-radius: var(--radius-800);
|
|
2424
|
-
box-shadow: var(--shadow-low);
|
|
2425
|
-
background-color: var(--color-container-bg-base);
|
|
2426
|
-
font-family: var(--font-family);
|
|
2427
|
-
}
|
|
2428
|
-
|
|
2429
|
-
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
2554
|
+
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
2430
2555
|
their own min-content. A wide row of widgets (a metric grid, a card grid) then
|
|
2431
2556
|
forces its column wider than the padded surface — and since the container clips
|
|
2432
2557
|
with overflow:hidden, the excess is cut off at the edge, eating the right-hand
|
|
@@ -2439,39 +2564,37 @@
|
|
|
2439
2564
|
default. Any component that needs a real floor (e.g. the data callout's 270px
|
|
2440
2565
|
donut slot) sets its own min-width via a plain class and always wins, instead
|
|
2441
2566
|
of racing this rule on source order. */
|
|
2442
|
-
:where(.seeds-narrative-container),
|
|
2443
|
-
:where(.seeds-narrative-container *) {
|
|
2444
|
-
|
|
2445
|
-
}
|
|
2567
|
+
:where(.seeds-narrative-container),
|
|
2568
|
+
:where(.seeds-narrative-container *) {
|
|
2569
|
+
min-width: 0;
|
|
2570
|
+
}
|
|
2446
2571
|
|
|
2447
|
-
/* Decorative inner gradient border anchored to the top-left corner.
|
|
2572
|
+
/* Decorative inner gradient border anchored to the top-left corner.
|
|
2448
2573
|
A masked ::before so the gradient renders as a uniform-width ring that follows
|
|
2449
2574
|
border-radius and never tints the content. The radial ellipse fades to
|
|
2450
2575
|
transparent away from the corner; its x-radius (80%) is larger than its
|
|
2451
2576
|
y-radius (60%) so the accent runs slightly further along the top edge than down
|
|
2452
2577
|
the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
|
|
2453
2578
|
--color-gradient-* token once one exists for a fade-to-transparent variant. */
|
|
2454
|
-
.seeds-narrative-container-accent::before {
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
}
|
|
2474
|
-
|
|
2579
|
+
.seeds-narrative-container-accent::before {
|
|
2580
|
+
content: "";
|
|
2581
|
+
position: absolute;
|
|
2582
|
+
inset: 0;
|
|
2583
|
+
border-radius: inherit;
|
|
2584
|
+
padding: 4px;
|
|
2585
|
+
background: radial-gradient(
|
|
2586
|
+
ellipse 80% 60% at top left,
|
|
2587
|
+
#205bc3 0%,
|
|
2588
|
+
#9747ff 28%,
|
|
2589
|
+
#f282f5 50%,
|
|
2590
|
+
transparent 72%
|
|
2591
|
+
);
|
|
2592
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
|
2593
|
+
linear-gradient(#fff 0 0);
|
|
2594
|
+
-webkit-mask-composite: xor;
|
|
2595
|
+
mask-composite: exclude;
|
|
2596
|
+
pointer-events: none;
|
|
2597
|
+
}
|
|
2475
2598
|
}
|
|
2476
2599
|
|
|
2477
2600
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2496,89 +2619,87 @@
|
|
|
2496
2619
|
*/
|
|
2497
2620
|
|
|
2498
2621
|
@layer components {
|
|
2499
|
-
|
|
2500
|
-
/* Establishes the query container. The row inside reacts to this element's
|
|
2622
|
+
/* Establishes the query container. The row inside reacts to this element's
|
|
2501
2623
|
inline size. A container query only styles DESCENDANTS of the query container,
|
|
2502
2624
|
so the flex row lives on the inner element, not this one. */
|
|
2503
|
-
.seeds-narrative-data-callout {
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
}
|
|
2625
|
+
.seeds-narrative-data-callout {
|
|
2626
|
+
container-type: inline-size;
|
|
2627
|
+
box-sizing: border-box;
|
|
2628
|
+
font-family: var(--font-family);
|
|
2629
|
+
}
|
|
2508
2630
|
|
|
2509
|
-
/* Stacked single column by default (narrow). The container query below turns it
|
|
2631
|
+
/* Stacked single column by default (narrow). The container query below turns it
|
|
2510
2632
|
into the horizontal 1/3 + 2/3 row once there is room. */
|
|
2511
|
-
.seeds-narrative-data-callout-row {
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
}
|
|
2633
|
+
.seeds-narrative-data-callout-row {
|
|
2634
|
+
box-sizing: border-box;
|
|
2635
|
+
display: flex;
|
|
2636
|
+
flex-direction: column;
|
|
2637
|
+
align-items: center;
|
|
2638
|
+
gap: var(--space-450); /* 24px */
|
|
2639
|
+
}
|
|
2518
2640
|
|
|
2519
|
-
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
2641
|
+
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
2520
2642
|
its own look and its own size. No fixed height: charts like the data-viz
|
|
2521
2643
|
DonutChart carry their own intrinsic height (and a legend), so the slot sizes
|
|
2522
2644
|
to the chart rather than clipping it. Stacked full-width until the container
|
|
2523
2645
|
query expands the row. */
|
|
2524
|
-
.seeds-narrative-data-callout-visual {
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
}
|
|
2646
|
+
.seeds-narrative-data-callout-visual {
|
|
2647
|
+
box-sizing: border-box;
|
|
2648
|
+
display: flex;
|
|
2649
|
+
align-items: center;
|
|
2650
|
+
justify-content: center;
|
|
2651
|
+
width: 100%;
|
|
2652
|
+
min-width: 0;
|
|
2653
|
+
}
|
|
2532
2654
|
|
|
2533
|
-
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
2655
|
+
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
2534
2656
|
the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
|
|
2535
2657
|
so Highcharts fills that shrunk width and the ring gets width-capped below its
|
|
2536
2658
|
fixed 270px height — leaving an empty vertical band. Filling the width lets the
|
|
2537
2659
|
ring become height-capped and fill its box top-to-bottom, like the standalone
|
|
2538
2660
|
chart story. */
|
|
2539
|
-
.seeds-narrative-data-callout-visual > * {
|
|
2540
|
-
|
|
2541
|
-
}
|
|
2661
|
+
.seeds-narrative-data-callout-visual > * {
|
|
2662
|
+
width: 100%;
|
|
2663
|
+
}
|
|
2542
2664
|
|
|
2543
|
-
/* Body copy — fills the remaining space. */
|
|
2544
|
-
.seeds-narrative-data-callout-body {
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
}
|
|
2665
|
+
/* Body copy — fills the remaining space. */
|
|
2666
|
+
.seeds-narrative-data-callout-body {
|
|
2667
|
+
box-sizing: border-box;
|
|
2668
|
+
min-width: 0;
|
|
2669
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2670
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
2671
|
+
font-weight: var(--font-weight-normal);
|
|
2672
|
+
color: var(--color-text-body);
|
|
2673
|
+
overflow-wrap: break-word;
|
|
2674
|
+
}
|
|
2553
2675
|
|
|
2554
|
-
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
2676
|
+
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
2555
2677
|
The threshold is on the component's own width (container query), so a narrow
|
|
2556
2678
|
callout on a wide screen still stacks. 480px keeps the donut + copy readable
|
|
2557
2679
|
side by side. */
|
|
2558
|
-
@container (min-width: 480px) {
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2680
|
+
@container (min-width: 480px) {
|
|
2681
|
+
.seeds-narrative-data-callout-row {
|
|
2682
|
+
flex-direction: row;
|
|
2683
|
+
}
|
|
2562
2684
|
|
|
2563
|
-
|
|
2564
|
-
|
|
2685
|
+
.seeds-narrative-data-callout-visual {
|
|
2686
|
+
/* Nominally one-third, but never narrower than the injected chart's fixed
|
|
2565
2687
|
height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
|
|
2566
2688
|
fixed-height chart like the donut gets width-capped and leaves an empty
|
|
2567
2689
|
vertical band above/below the ring; the min-width keeps the visual square
|
|
2568
2690
|
enough that the ring fills its box top-to-bottom, matching the standalone
|
|
2569
2691
|
chart story. */
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2692
|
+
flex: 0 0 33.333%;
|
|
2693
|
+
min-width: 270px;
|
|
2694
|
+
width: auto;
|
|
2695
|
+
}
|
|
2574
2696
|
|
|
2575
|
-
|
|
2576
|
-
|
|
2697
|
+
.seeds-narrative-data-callout-body {
|
|
2698
|
+
flex: 1 1 0;
|
|
2699
|
+
}
|
|
2577
2700
|
}
|
|
2578
2701
|
}
|
|
2579
2702
|
|
|
2580
|
-
}
|
|
2581
|
-
|
|
2582
2703
|
/* --- seeds-react-narrative-kit --- */
|
|
2583
2704
|
/**
|
|
2584
2705
|
* Seeds NarrativeDivider component classes.
|
|
@@ -2592,20 +2713,18 @@
|
|
|
2592
2713
|
*/
|
|
2593
2714
|
|
|
2594
2715
|
@layer components {
|
|
2595
|
-
|
|
2596
|
-
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
2716
|
+
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
2597
2717
|
and a beveled border, so reset those and draw the line with a single
|
|
2598
2718
|
border-top using the container-border-base token (#dee1e1), which also
|
|
2599
2719
|
tracks dark mode. */
|
|
2600
|
-
.seeds-narrative-divider {
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
}
|
|
2608
|
-
|
|
2720
|
+
.seeds-narrative-divider {
|
|
2721
|
+
box-sizing: border-box;
|
|
2722
|
+
width: 100%;
|
|
2723
|
+
height: 0;
|
|
2724
|
+
margin: 0;
|
|
2725
|
+
border: 0;
|
|
2726
|
+
border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
|
|
2727
|
+
}
|
|
2609
2728
|
}
|
|
2610
2729
|
|
|
2611
2730
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2625,121 +2744,120 @@
|
|
|
2625
2744
|
*/
|
|
2626
2745
|
|
|
2627
2746
|
@layer components {
|
|
2747
|
+
/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
|
|
2748
|
+
.seeds-narrative-headline {
|
|
2749
|
+
box-sizing: border-box;
|
|
2750
|
+
margin: 0;
|
|
2751
|
+
font-family: var(--font-family);
|
|
2752
|
+
font-size: var(--font-size-700);
|
|
2753
|
+
line-height: var(--line-height-700);
|
|
2754
|
+
font-weight: var(--font-weight-bold);
|
|
2755
|
+
letter-spacing: -0.02em;
|
|
2756
|
+
color: var(--color-text-headline);
|
|
2757
|
+
}
|
|
2628
2758
|
|
|
2629
|
-
/*
|
|
2630
|
-
.seeds-narrative-headline {
|
|
2631
|
-
box-sizing: border-box;
|
|
2632
|
-
margin: 0;
|
|
2633
|
-
font-family: var(--font-family);
|
|
2634
|
-
font-size: var(--font-size-700);
|
|
2635
|
-
line-height: var(--line-height-700);
|
|
2636
|
-
font-weight: var(--font-weight-bold);
|
|
2637
|
-
letter-spacing: -0.02em;
|
|
2638
|
-
color: var(--color-text-headline);
|
|
2639
|
-
}
|
|
2640
|
-
|
|
2641
|
-
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
2759
|
+
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
2642
2760
|
spacing, and color are inherited from the base class. */
|
|
2643
|
-
.seeds-narrative-headline-small {
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
}
|
|
2761
|
+
.seeds-narrative-headline-small {
|
|
2762
|
+
font-size: var(--font-size-600); /* 24px */
|
|
2763
|
+
line-height: var(--line-height-600); /* 32px */
|
|
2764
|
+
}
|
|
2647
2765
|
|
|
2648
|
-
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
2766
|
+
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
2649
2767
|
Paints the AI brand gradient onto the glyphs via background-clip. */
|
|
2650
|
-
.seeds-narrative-headline-highlight {
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
}
|
|
2768
|
+
.seeds-narrative-headline-highlight {
|
|
2769
|
+
background: var(--color-gradient-ai);
|
|
2770
|
+
-webkit-background-clip: text;
|
|
2771
|
+
background-clip: text;
|
|
2772
|
+
color: transparent;
|
|
2773
|
+
}
|
|
2656
2774
|
|
|
2657
|
-
/* -------------------------------------------------------------------------
|
|
2775
|
+
/* -------------------------------------------------------------------------
|
|
2658
2776
|
"Roll" variant — vertical word roll. The active word slides into view
|
|
2659
2777
|
while the previous one rolls out.
|
|
2660
2778
|
------------------------------------------------------------------------- */
|
|
2661
|
-
.seeds-narrative-headline-roll {
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2779
|
+
.seeds-narrative-headline-roll {
|
|
2780
|
+
display: inline-block;
|
|
2781
|
+
position: relative;
|
|
2782
|
+
/* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
|
|
2665
2783
|
snaps its baseline to the bottom margin edge, dropping the rolling word
|
|
2666
2784
|
below the surrounding text. clip-path keeps the natural baseline. */
|
|
2667
|
-
|
|
2668
|
-
}
|
|
2669
|
-
|
|
2670
|
-
/* Invisible word that holds the box width to the active word. */
|
|
2671
|
-
.seeds-narrative-headline-roll-sizer {
|
|
2672
|
-
display: inline-block;
|
|
2673
|
-
visibility: hidden;
|
|
2674
|
-
white-space: nowrap;
|
|
2675
|
-
pointer-events: none;
|
|
2676
|
-
}
|
|
2677
|
-
|
|
2678
|
-
.seeds-narrative-headline-roll-word {
|
|
2679
|
-
display: inline-block;
|
|
2680
|
-
position: absolute;
|
|
2681
|
-
top: 0;
|
|
2682
|
-
left: 0;
|
|
2683
|
-
white-space: nowrap;
|
|
2684
|
-
transform: translateY(100%);
|
|
2685
|
-
opacity: 0;
|
|
2686
|
-
transition:
|
|
2687
|
-
transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
2688
|
-
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
2689
|
-
}
|
|
2785
|
+
clip-path: inset(0);
|
|
2786
|
+
}
|
|
2690
2787
|
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2788
|
+
/* Invisible word that holds the box width to the active word. */
|
|
2789
|
+
.seeds-narrative-headline-roll-sizer {
|
|
2790
|
+
display: inline-block;
|
|
2791
|
+
visibility: hidden;
|
|
2792
|
+
white-space: nowrap;
|
|
2793
|
+
pointer-events: none;
|
|
2794
|
+
}
|
|
2695
2795
|
|
|
2696
|
-
.seeds-narrative-headline-roll-word
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2796
|
+
.seeds-narrative-headline-roll-word {
|
|
2797
|
+
display: inline-block;
|
|
2798
|
+
position: absolute;
|
|
2799
|
+
top: 0;
|
|
2800
|
+
left: 0;
|
|
2801
|
+
white-space: nowrap;
|
|
2802
|
+
transform: translateY(100%);
|
|
2803
|
+
opacity: 0;
|
|
2804
|
+
transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
2805
|
+
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
2806
|
+
}
|
|
2700
2807
|
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
}
|
|
2705
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
|
|
2706
|
-
transform: translateY(0);
|
|
2707
|
-
}
|
|
2708
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
2709
|
-
transform: translateY(100%);
|
|
2710
|
-
}
|
|
2808
|
+
.seeds-narrative-headline-roll-word-active {
|
|
2809
|
+
transform: translateY(0);
|
|
2810
|
+
opacity: 1;
|
|
2811
|
+
}
|
|
2711
2812
|
|
|
2712
|
-
|
|
2713
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
-webkit-background-clip: text;
|
|
2717
|
-
background-clip: text;
|
|
2718
|
-
color: transparent;
|
|
2719
|
-
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
2720
|
-
}
|
|
2813
|
+
.seeds-narrative-headline-roll-word-past {
|
|
2814
|
+
transform: translateY(-100%);
|
|
2815
|
+
opacity: 0;
|
|
2816
|
+
}
|
|
2721
2817
|
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
background-position: 0% 50%;
|
|
2818
|
+
/* Reverse the roll direction. */
|
|
2819
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
|
|
2820
|
+
transform: translateY(-100%);
|
|
2726
2821
|
}
|
|
2727
|
-
|
|
2728
|
-
|
|
2822
|
+
.seeds-narrative-headline-roll-down
|
|
2823
|
+
.seeds-narrative-headline-roll-word-active {
|
|
2824
|
+
transform: translateY(0);
|
|
2729
2825
|
}
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
2733
|
-
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
2734
|
-
@media (prefers-reduced-motion: reduce) {
|
|
2735
|
-
.seeds-narrative-headline-roll-word {
|
|
2736
|
-
transition: none;
|
|
2826
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
2827
|
+
transform: translateY(100%);
|
|
2737
2828
|
}
|
|
2829
|
+
|
|
2830
|
+
/* Gradient-painted rolling words with a slow shimmer. */
|
|
2738
2831
|
.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
|
|
2739
|
-
|
|
2832
|
+
background: var(--color-gradient-ai);
|
|
2833
|
+
background-size: 200% 200%;
|
|
2834
|
+
-webkit-background-clip: text;
|
|
2835
|
+
background-clip: text;
|
|
2836
|
+
color: transparent;
|
|
2837
|
+
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
@keyframes seeds-narrative-headline-grad-shift {
|
|
2841
|
+
0%,
|
|
2842
|
+
100% {
|
|
2843
|
+
background-position: 0% 50%;
|
|
2844
|
+
}
|
|
2845
|
+
50% {
|
|
2846
|
+
background-position: 100% 50%;
|
|
2847
|
+
}
|
|
2740
2848
|
}
|
|
2741
|
-
}
|
|
2742
2849
|
|
|
2850
|
+
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
2851
|
+
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
2852
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2853
|
+
.seeds-narrative-headline-roll-word {
|
|
2854
|
+
transition: none;
|
|
2855
|
+
}
|
|
2856
|
+
.seeds-narrative-headline-roll-gradient
|
|
2857
|
+
.seeds-narrative-headline-roll-word {
|
|
2858
|
+
animation: none;
|
|
2859
|
+
}
|
|
2860
|
+
}
|
|
2743
2861
|
}
|
|
2744
2862
|
|
|
2745
2863
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2759,103 +2877,109 @@
|
|
|
2759
2877
|
*/
|
|
2760
2878
|
|
|
2761
2879
|
@layer components {
|
|
2762
|
-
|
|
2763
|
-
/* Establishes the query container. The track inside reacts to this element's
|
|
2880
|
+
/* Establishes the query container. The track inside reacts to this element's
|
|
2764
2881
|
inline size — a container query can only style descendants of the container,
|
|
2765
2882
|
never the container element itself. */
|
|
2766
|
-
.seeds-narrative-ordered-list {
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
}
|
|
2883
|
+
.seeds-narrative-ordered-list {
|
|
2884
|
+
container-type: inline-size;
|
|
2885
|
+
box-sizing: border-box;
|
|
2886
|
+
font-family: var(--font-family);
|
|
2887
|
+
}
|
|
2771
2888
|
|
|
2772
|
-
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
2889
|
+
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
2773
2890
|
only expands to a row once the container query below has room, so horizontal
|
|
2774
2891
|
collapses back to this stack when narrow. */
|
|
2775
|
-
.seeds-narrative-ordered-list-track {
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
}
|
|
2892
|
+
.seeds-narrative-ordered-list-track {
|
|
2893
|
+
display: flex;
|
|
2894
|
+
flex-direction: column;
|
|
2895
|
+
gap: var(--space-400); /* 16px */
|
|
2896
|
+
margin: 0;
|
|
2897
|
+
padding: 0;
|
|
2898
|
+
list-style: none;
|
|
2899
|
+
}
|
|
2783
2900
|
|
|
2784
|
-
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
2785
|
-
.seeds-narrative-ordered-list-item {
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
}
|
|
2901
|
+
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
2902
|
+
.seeds-narrative-ordered-list-item {
|
|
2903
|
+
display: flex;
|
|
2904
|
+
gap: var(--space-450); /* 24px */
|
|
2905
|
+
align-items: flex-start;
|
|
2906
|
+
box-sizing: border-box;
|
|
2907
|
+
min-width: 0;
|
|
2908
|
+
padding: var(--space-400) var(--space-450); /* 16px 24px */
|
|
2909
|
+
border-radius: var(--radius-800); /* 12px */
|
|
2910
|
+
background-color: var(--color-app-bg-base);
|
|
2911
|
+
}
|
|
2795
2912
|
|
|
2796
|
-
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
2913
|
+
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
2797
2914
|
monospace stack — mirrors the value treatment in metric-highlight.css. */
|
|
2798
|
-
.seeds-narrative-ordered-list-number {
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2915
|
+
.seeds-narrative-ordered-list-number {
|
|
2916
|
+
margin: 0;
|
|
2917
|
+
flex-shrink: 0;
|
|
2918
|
+
font-family: var(
|
|
2919
|
+
--font-family-mono,
|
|
2920
|
+
ui-monospace,
|
|
2921
|
+
"SF Mono",
|
|
2922
|
+
SFMono-Regular,
|
|
2923
|
+
Menlo,
|
|
2924
|
+
monospace
|
|
2925
|
+
);
|
|
2926
|
+
font-size: var(--font-size-700); /* 32px */
|
|
2927
|
+
line-height: var(--line-height-700); /* 40px */
|
|
2928
|
+
font-weight: var(--font-weight-bold);
|
|
2929
|
+
color: var(--color-text-headline);
|
|
2930
|
+
}
|
|
2807
2931
|
|
|
2808
|
-
/* Title + description + optional action, stacked. */
|
|
2809
|
-
.seeds-narrative-ordered-list-body {
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
}
|
|
2932
|
+
/* Title + description + optional action, stacked. */
|
|
2933
|
+
.seeds-narrative-ordered-list-body {
|
|
2934
|
+
flex: 1 1 auto;
|
|
2935
|
+
display: flex;
|
|
2936
|
+
flex-direction: column;
|
|
2937
|
+
gap: var(--space-200); /* 4px */
|
|
2938
|
+
min-width: 0;
|
|
2939
|
+
}
|
|
2816
2940
|
|
|
2817
|
-
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
2941
|
+
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
2818
2942
|
skips from 24px to 32px), so the design value is kept verbatim. Same
|
|
2819
2943
|
rationale as narrative-summary.css. */
|
|
2820
|
-
.seeds-narrative-ordered-list-title {
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
}
|
|
2944
|
+
.seeds-narrative-ordered-list-title {
|
|
2945
|
+
margin: 0;
|
|
2946
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2947
|
+
line-height: 28px; /* off-scale, see comment above */
|
|
2948
|
+
font-weight: var(--font-weight-bold);
|
|
2949
|
+
color: var(--color-text-body);
|
|
2950
|
+
}
|
|
2827
2951
|
|
|
2828
|
-
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
2952
|
+
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
2829
2953
|
same rationale as the title above. */
|
|
2830
|
-
.seeds-narrative-ordered-list-description {
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
}
|
|
2954
|
+
.seeds-narrative-ordered-list-description {
|
|
2955
|
+
margin: 0;
|
|
2956
|
+
font-size: 14px; /* off-scale, see title above */
|
|
2957
|
+
line-height: 24px;
|
|
2958
|
+
font-weight: var(--font-weight-normal);
|
|
2959
|
+
color: var(--color-text-body);
|
|
2960
|
+
}
|
|
2837
2961
|
|
|
2838
|
-
.seeds-narrative-ordered-list-action {
|
|
2839
|
-
|
|
2840
|
-
}
|
|
2962
|
+
.seeds-narrative-ordered-list-action {
|
|
2963
|
+
padding-top: var(--space-350); /* 12px */
|
|
2964
|
+
}
|
|
2841
2965
|
|
|
2842
|
-
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
2966
|
+
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
2843
2967
|
wide enough. The threshold is on the component's own width (container query),
|
|
2844
2968
|
so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
|
|
2845
2969
|
breakpoint, matching narrative-summary.css. */
|
|
2846
|
-
@container (min-width: 640px) {
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2970
|
+
@container (min-width: 640px) {
|
|
2971
|
+
.seeds-narrative-ordered-list-horizontal {
|
|
2972
|
+
flex-direction: row;
|
|
2973
|
+
}
|
|
2850
2974
|
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2975
|
+
.seeds-narrative-ordered-list-horizontal
|
|
2976
|
+
> .seeds-narrative-ordered-list-item {
|
|
2977
|
+
flex: 1 1 0;
|
|
2978
|
+
min-width: 0;
|
|
2979
|
+
}
|
|
2854
2980
|
}
|
|
2855
2981
|
}
|
|
2856
2982
|
|
|
2857
|
-
}
|
|
2858
|
-
|
|
2859
2983
|
/* --- seeds-react-narrative-kit --- */
|
|
2860
2984
|
/**
|
|
2861
2985
|
* Seeds NarrativeSection component classes.
|
|
@@ -2872,36 +2996,34 @@
|
|
|
2872
2996
|
*/
|
|
2873
2997
|
|
|
2874
2998
|
@layer components {
|
|
2875
|
-
|
|
2876
|
-
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
2999
|
+
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
2877
3000
|
no surface of its own — it's meant to sit inside a NarrativeContainer. */
|
|
2878
|
-
.seeds-narrative-section {
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
}
|
|
3001
|
+
.seeds-narrative-section {
|
|
3002
|
+
display: flex;
|
|
3003
|
+
flex-direction: column;
|
|
3004
|
+
gap: var(--space-400); /* 16px — title to content */
|
|
3005
|
+
}
|
|
2883
3006
|
|
|
2884
|
-
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
3007
|
+
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
2885
3008
|
single-column grid (gap={500}) would give them, so multiple primitives inside
|
|
2886
3009
|
one section are spaced exactly as they are between sections. */
|
|
2887
|
-
.seeds-narrative-section-content {
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
}
|
|
3010
|
+
.seeds-narrative-section-content {
|
|
3011
|
+
display: flex;
|
|
3012
|
+
flex-direction: column;
|
|
3013
|
+
gap: var(--space-500); /* 32px — between widgets */
|
|
3014
|
+
}
|
|
2892
3015
|
|
|
2893
|
-
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
3016
|
+
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
2894
3017
|
which also tracks dark mode). Matches the summary-label recipe used across
|
|
2895
3018
|
the kit. The heading element ships with user-agent margins, so reset them. */
|
|
2896
|
-
.seeds-narrative-section-title {
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
}
|
|
2904
|
-
|
|
3019
|
+
.seeds-narrative-section-title {
|
|
3020
|
+
margin: 0;
|
|
3021
|
+
font-family: var(--font-family);
|
|
3022
|
+
font-size: 14px;
|
|
3023
|
+
line-height: 24px;
|
|
3024
|
+
font-weight: var(--font-weight-bold);
|
|
3025
|
+
color: var(--color-text-headline); /* #273333 */
|
|
3026
|
+
}
|
|
2905
3027
|
}
|
|
2906
3028
|
|
|
2907
3029
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2921,71 +3043,77 @@
|
|
|
2921
3043
|
*/
|
|
2922
3044
|
|
|
2923
3045
|
@layer components {
|
|
2924
|
-
|
|
2925
|
-
/* Main card container — gray background with rounded corners and padding.
|
|
3046
|
+
/* Main card container — gray background with rounded corners and padding.
|
|
2926
3047
|
Uses Seeds tokens for spacing, colors, and radius to match the design system.
|
|
2927
3048
|
Fills the width it is given (e.g. a grid column) and stretches its content to
|
|
2928
3049
|
match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
|
|
2929
3050
|
and resizes together instead of being pinned to a fixed 320px. */
|
|
2930
|
-
.seeds-narrative-social-media-card {
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
}
|
|
2942
|
-
|
|
2943
|
-
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
2944
|
-
.seeds-narrative-social-media-card--no-background {
|
|
2945
|
-
background-color: transparent;
|
|
2946
|
-
}
|
|
2947
|
-
|
|
2948
|
-
/* Main content area — standard body text styling. */
|
|
2949
|
-
.seeds-narrative-social-media-card-content {
|
|
2950
|
-
flex: 1;
|
|
2951
|
-
margin-top: var(--space-400); /* 16px */
|
|
2952
|
-
font-family: var(--font-family);
|
|
2953
|
-
font-size: 14px;
|
|
2954
|
-
font-style: normal;
|
|
2955
|
-
font-weight: 400;
|
|
2956
|
-
line-height: 24px;
|
|
2957
|
-
color: var(--color-text-body);
|
|
2958
|
-
}
|
|
3051
|
+
.seeds-narrative-social-media-card {
|
|
3052
|
+
box-sizing: border-box;
|
|
3053
|
+
display: flex;
|
|
3054
|
+
flex-direction: column;
|
|
3055
|
+
align-items: stretch;
|
|
3056
|
+
width: 100%;
|
|
3057
|
+
padding: var(--space-450); /* 24px */
|
|
3058
|
+
border-radius: var(--radius-500); /* 6px */
|
|
3059
|
+
background-color: var(--color-app-bg-base);
|
|
3060
|
+
font-family: var(--font-family);
|
|
3061
|
+
color: var(--color-text-body);
|
|
3062
|
+
}
|
|
2959
3063
|
|
|
2960
|
-
/*
|
|
2961
|
-
.seeds-narrative-social-media-card-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
gap: var(--space-400); /* 16px */
|
|
2965
|
-
margin-top: var(--space-400); /* 16px */;
|
|
2966
|
-
}
|
|
3064
|
+
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
3065
|
+
.seeds-narrative-social-media-card--no-background {
|
|
3066
|
+
background-color: transparent;
|
|
3067
|
+
}
|
|
2967
3068
|
|
|
2968
|
-
/*
|
|
2969
|
-
.seeds-narrative-social-media-card-
|
|
2970
|
-
|
|
2971
|
-
|
|
3069
|
+
/* Main content area — standard body text styling. */
|
|
3070
|
+
.seeds-narrative-social-media-card-content {
|
|
3071
|
+
flex: 1;
|
|
3072
|
+
margin-top: var(--space-400); /* 16px */
|
|
3073
|
+
font-family: var(--font-family);
|
|
3074
|
+
font-size: 14px;
|
|
3075
|
+
font-style: normal;
|
|
3076
|
+
font-weight: 400;
|
|
3077
|
+
line-height: 24px;
|
|
3078
|
+
color: var(--color-text-body);
|
|
3079
|
+
}
|
|
2972
3080
|
|
|
2973
|
-
/*
|
|
2974
|
-
.seeds-narrative-social-media-card-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
3081
|
+
/* Footer section — horizontal layout for stats with equal spacing. */
|
|
3082
|
+
.seeds-narrative-social-media-card-footer {
|
|
3083
|
+
display: flex;
|
|
3084
|
+
align-items: center;
|
|
3085
|
+
gap: var(--space-400); /* 16px */
|
|
3086
|
+
margin-top: var(--space-400); /* 16px */
|
|
3087
|
+
}
|
|
2979
3088
|
|
|
2980
|
-
/*
|
|
2981
|
-
.seeds-narrative-social-media-card-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
font-weight: 400;
|
|
2985
|
-
line-height: 24px;
|
|
2986
|
-
color: var(--color-text-body);
|
|
2987
|
-
}
|
|
3089
|
+
/* Hide footer when empty (no metadata items). */
|
|
3090
|
+
.seeds-narrative-social-media-card-footer:empty {
|
|
3091
|
+
display: none;
|
|
3092
|
+
}
|
|
2988
3093
|
|
|
3094
|
+
/* Individual stat container — icon + value in horizontal layout. */
|
|
3095
|
+
.seeds-narrative-social-media-card-stat {
|
|
3096
|
+
display: flex;
|
|
3097
|
+
align-items: center;
|
|
3098
|
+
gap: var(--space-200); /* 4px */
|
|
3099
|
+
}
|
|
3100
|
+
|
|
3101
|
+
/* Stat value text — monospace font for numeric values. */
|
|
3102
|
+
.seeds-narrative-social-media-card-stat-value {
|
|
3103
|
+
font-family: var(
|
|
3104
|
+
--font-family-mono,
|
|
3105
|
+
ui-monospace,
|
|
3106
|
+
"SF Mono",
|
|
3107
|
+
SFMono-Regular,
|
|
3108
|
+
Menlo,
|
|
3109
|
+
monospace
|
|
3110
|
+
);
|
|
3111
|
+
font-size: 14px;
|
|
3112
|
+
font-style: normal;
|
|
3113
|
+
font-weight: 400;
|
|
3114
|
+
line-height: 24px;
|
|
3115
|
+
color: var(--color-text-body);
|
|
3116
|
+
}
|
|
2989
3117
|
}
|
|
2990
3118
|
|
|
2991
3119
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -3007,115 +3135,113 @@
|
|
|
3007
3135
|
*/
|
|
3008
3136
|
|
|
3009
3137
|
@layer components {
|
|
3010
|
-
|
|
3011
|
-
/* Establishes the query container. The grid inside reacts to this element's
|
|
3138
|
+
/* Establishes the query container. The grid inside reacts to this element's
|
|
3012
3139
|
inline size. */
|
|
3013
|
-
.seeds-narrative-summary {
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
}
|
|
3140
|
+
.seeds-narrative-summary {
|
|
3141
|
+
container-type: inline-size;
|
|
3142
|
+
box-sizing: border-box;
|
|
3143
|
+
font-family: var(--font-family);
|
|
3144
|
+
}
|
|
3018
3145
|
|
|
3019
|
-
/* Stacked single column by default (narrow). The container query below expands
|
|
3146
|
+
/* Stacked single column by default (narrow). The container query below expands
|
|
3020
3147
|
it once there is room. */
|
|
3021
|
-
.seeds-narrative-summary-grid {
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
}
|
|
3148
|
+
.seeds-narrative-summary-grid {
|
|
3149
|
+
display: grid;
|
|
3150
|
+
grid-template-columns: 1fr;
|
|
3151
|
+
gap: var(--space-450); /* 24px */
|
|
3152
|
+
}
|
|
3026
3153
|
|
|
3027
|
-
/* The lead column: eyebrow, headline, optional action. align-items:flex-start
|
|
3154
|
+
/* The lead column: eyebrow, headline, optional action. align-items:flex-start
|
|
3028
3155
|
keeps the eyebrow pill and the action sized to their content — without it the
|
|
3029
3156
|
column's default stretch would blow the eyebrow out to full width. The
|
|
3030
3157
|
headline still fills and wraps because its text is wider than the track. */
|
|
3031
|
-
.seeds-narrative-summary-lead {
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
}
|
|
3158
|
+
.seeds-narrative-summary-lead {
|
|
3159
|
+
display: flex;
|
|
3160
|
+
flex-direction: column;
|
|
3161
|
+
align-items: flex-start;
|
|
3162
|
+
gap: var(--space-300); /* 8px */
|
|
3163
|
+
min-width: 0;
|
|
3164
|
+
}
|
|
3038
3165
|
|
|
3039
|
-
/* The headline area grows so the action anchors toward the bottom of the lead
|
|
3166
|
+
/* The headline area grows so the action anchors toward the bottom of the lead
|
|
3040
3167
|
column when the neighboring columns are taller. align-self:stretch fills the
|
|
3041
3168
|
track width (the lead column pins other items to flex-start) so the headline
|
|
3042
3169
|
wraps at the column edge regardless of its length. */
|
|
3043
|
-
.seeds-narrative-summary-headline {
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
}
|
|
3170
|
+
.seeds-narrative-summary-headline {
|
|
3171
|
+
flex: 1 1 auto;
|
|
3172
|
+
align-self: stretch;
|
|
3173
|
+
}
|
|
3047
3174
|
|
|
3048
|
-
/* In three-column mode the content wrapper is transparent to the grid, so its
|
|
3175
|
+
/* In three-column mode the content wrapper is transparent to the grid, so its
|
|
3049
3176
|
two sections become grid items in their own columns. In two-column mode the
|
|
3050
3177
|
container query below turns it into a real, stacking grid item. */
|
|
3051
|
-
.seeds-narrative-summary-content {
|
|
3052
|
-
|
|
3053
|
-
}
|
|
3178
|
+
.seeds-narrative-summary-content {
|
|
3179
|
+
display: contents;
|
|
3180
|
+
}
|
|
3054
3181
|
|
|
3055
|
-
.seeds-narrative-summary-section {
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
}
|
|
3182
|
+
.seeds-narrative-summary-section {
|
|
3183
|
+
display: flex;
|
|
3184
|
+
flex-direction: column;
|
|
3185
|
+
gap: var(--space-300); /* 8px */
|
|
3186
|
+
min-width: 0;
|
|
3187
|
+
}
|
|
3061
3188
|
|
|
3062
|
-
/* Section label. 14px / 24px has no exact type token (the scale skips from
|
|
3189
|
+
/* Section label. 14px / 24px has no exact type token (the scale skips from
|
|
3063
3190
|
13px to 16px), so the design value is kept verbatim — same rationale as
|
|
3064
3191
|
eyebrow-token.css. All other values use tokens. */
|
|
3065
|
-
.seeds-narrative-summary-label {
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
}
|
|
3192
|
+
.seeds-narrative-summary-label {
|
|
3193
|
+
margin: 0;
|
|
3194
|
+
font-size: 14px;
|
|
3195
|
+
line-height: 24px;
|
|
3196
|
+
font-weight: var(--font-weight-bold);
|
|
3197
|
+
color: var(--color-text-headline);
|
|
3198
|
+
}
|
|
3072
3199
|
|
|
3073
|
-
.seeds-narrative-summary-text {
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
}
|
|
3200
|
+
.seeds-narrative-summary-text {
|
|
3201
|
+
margin: 0;
|
|
3202
|
+
font-size: 14px; /* off-scale, see label above */
|
|
3203
|
+
line-height: 24px;
|
|
3204
|
+
font-weight: var(--font-weight-normal);
|
|
3205
|
+
color: var(--color-text-body);
|
|
3206
|
+
}
|
|
3080
3207
|
|
|
3081
|
-
.seeds-narrative-summary-list {
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
}
|
|
3208
|
+
.seeds-narrative-summary-list {
|
|
3209
|
+
margin: 0;
|
|
3210
|
+
padding-inline-start: 21px;
|
|
3211
|
+
list-style: disc;
|
|
3212
|
+
font-size: 14px; /* off-scale, see label above */
|
|
3213
|
+
line-height: 24px;
|
|
3214
|
+
font-weight: var(--font-weight-normal);
|
|
3215
|
+
color: var(--color-text-body);
|
|
3216
|
+
}
|
|
3090
3217
|
|
|
3091
|
-
.seeds-narrative-summary-list li {
|
|
3092
|
-
|
|
3093
|
-
}
|
|
3218
|
+
.seeds-narrative-summary-list li {
|
|
3219
|
+
margin: 0;
|
|
3220
|
+
}
|
|
3094
3221
|
|
|
3095
|
-
/* Expand to the multi-column layout once the component is wide enough. The
|
|
3222
|
+
/* Expand to the multi-column layout once the component is wide enough. The
|
|
3096
3223
|
threshold is on the component's own width (container query), so a narrow card
|
|
3097
3224
|
on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
|
|
3098
|
-
@container (min-width: 640px) {
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3225
|
+
@container (min-width: 640px) {
|
|
3226
|
+
.seeds-narrative-summary-grid {
|
|
3227
|
+
grid-template-columns: repeat(3, 1fr);
|
|
3228
|
+
}
|
|
3102
3229
|
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3230
|
+
/* 1/3 lead + 2/3 content. */
|
|
3231
|
+
.seeds-narrative-summary-two-column {
|
|
3232
|
+
grid-template-columns: 1fr 2fr;
|
|
3233
|
+
}
|
|
3107
3234
|
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3235
|
+
/* The content wrapper becomes a real grid item that stacks its two sections. */
|
|
3236
|
+
.seeds-narrative-summary-two-column .seeds-narrative-summary-content {
|
|
3237
|
+
display: flex;
|
|
3238
|
+
flex-direction: column;
|
|
3239
|
+
gap: var(--space-450); /* 24px */
|
|
3240
|
+
min-width: 0;
|
|
3241
|
+
}
|
|
3114
3242
|
}
|
|
3115
3243
|
}
|
|
3116
3244
|
|
|
3117
|
-
}
|
|
3118
|
-
|
|
3119
3245
|
/* --- seeds-react-narrative-kit --- */
|
|
3120
3246
|
/**
|
|
3121
3247
|
* Seeds PullQuote component classes.
|
|
@@ -3130,60 +3256,58 @@
|
|
|
3130
3256
|
*/
|
|
3131
3257
|
|
|
3132
3258
|
@layer components {
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
/* 40px block / 48px inline — 48px is off the space scale, so derive it from
|
|
3259
|
+
.seeds-pull-quote {
|
|
3260
|
+
width: 100%;
|
|
3261
|
+
display: flex;
|
|
3262
|
+
flex-direction: column;
|
|
3263
|
+
align-items: flex-start;
|
|
3264
|
+
margin: 0; /* reset the browser default <figure> margin */
|
|
3265
|
+
/* 40px block / 48px inline — 48px is off the space scale, so derive it from
|
|
3141
3266
|
two tokens (40 + 8) rather than hardcoding an off-scale value. */
|
|
3142
|
-
|
|
3143
|
-
}
|
|
3267
|
+
padding: var(--space-600) calc(var(--space-600) + var(--space-300));
|
|
3268
|
+
}
|
|
3144
3269
|
|
|
3145
|
-
/* The accented bar holding the quote and attribution. */
|
|
3146
|
-
.seeds-pull-quote-bar {
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3270
|
+
/* The accented bar holding the quote and attribution. */
|
|
3271
|
+
.seeds-pull-quote-bar {
|
|
3272
|
+
box-sizing: border-box;
|
|
3273
|
+
display: flex;
|
|
3274
|
+
flex-direction: column;
|
|
3275
|
+
align-items: flex-start;
|
|
3276
|
+
gap: var(--space-450); /* 24px */
|
|
3277
|
+
width: 100%;
|
|
3278
|
+
padding-left: var(--space-450); /* 24px */
|
|
3279
|
+
/* 4px is off the border-width scale (max token is 3px); the bar is a
|
|
3155
3280
|
decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
|
|
3156
3281
|
subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
|
|
3157
|
-
|
|
3158
|
-
}
|
|
3282
|
+
border-left: 4px solid #9747ff;
|
|
3283
|
+
}
|
|
3159
3284
|
|
|
3160
|
-
.seeds-pull-quote-vivid .seeds-pull-quote-bar {
|
|
3161
|
-
|
|
3162
|
-
}
|
|
3285
|
+
.seeds-pull-quote-vivid .seeds-pull-quote-bar {
|
|
3286
|
+
border-left-color: #fff;
|
|
3287
|
+
}
|
|
3163
3288
|
|
|
3164
|
-
.seeds-pull-quote-text {
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
}
|
|
3289
|
+
.seeds-pull-quote-text {
|
|
3290
|
+
margin: 0; /* reset the browser default <blockquote> margin */
|
|
3291
|
+
font-size: var(--font-size-600);
|
|
3292
|
+
line-height: var(--line-height-600);
|
|
3293
|
+
font-style: italic;
|
|
3294
|
+
font-weight: var(--font-weight-normal);
|
|
3295
|
+
color: inherit;
|
|
3296
|
+
overflow-wrap: break-word;
|
|
3297
|
+
}
|
|
3173
3298
|
|
|
3174
|
-
/* Attribution row — a flex container for author name, avatar, network, etc.
|
|
3299
|
+
/* Attribution row — a flex container for author name, avatar, network, etc.
|
|
3175
3300
|
Direct text inherits a bold, small treatment to match the display-name style;
|
|
3176
3301
|
richer content (e.g. an Avatar) composes freely. */
|
|
3177
|
-
.seeds-pull-quote-attribution {
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
}
|
|
3186
|
-
|
|
3302
|
+
.seeds-pull-quote-attribution {
|
|
3303
|
+
display: flex;
|
|
3304
|
+
align-items: center;
|
|
3305
|
+
gap: var(--space-300); /* 8px */
|
|
3306
|
+
font-size: var(--font-size-200);
|
|
3307
|
+
line-height: var(--line-height-200);
|
|
3308
|
+
font-weight: var(--font-weight-bold);
|
|
3309
|
+
color: inherit;
|
|
3310
|
+
}
|
|
3187
3311
|
}
|
|
3188
3312
|
|
|
3189
3313
|
/* --- seeds-react-numeral --- */
|
|
@@ -3310,6 +3434,100 @@
|
|
|
3310
3434
|
}
|
|
3311
3435
|
}
|
|
3312
3436
|
|
|
3437
|
+
/* --- seeds-react-panel --- */
|
|
3438
|
+
/**
|
|
3439
|
+
* Seeds Panel component classes.
|
|
3440
|
+
* Component-scoped port of the static styled-components chrome in styles.ts.
|
|
3441
|
+
* Used by PanelTailwind.tsx and the Tailwind sub-component paths.
|
|
3442
|
+
*
|
|
3443
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
|
|
3444
|
+
* CSS variable definitions (and dark mode support).
|
|
3445
|
+
*
|
|
3446
|
+
* Runtime geometry (flex-basis, the gap margin, the direction shape, and the
|
|
3447
|
+
* inner min-width/min-height) is applied as inline style on the elements, not
|
|
3448
|
+
* here — the jsdom tests assert those computed values and CSS is not loaded in
|
|
3449
|
+
* that environment. Only static chrome lives in these classes.
|
|
3450
|
+
*
|
|
3451
|
+
* All rules live in `@layer components` so consumer Tailwind utilities (e.g.
|
|
3452
|
+
* mx-200, p-300, inline-flex) win the cascade and can override these component
|
|
3453
|
+
* defaults, rather than tying/beating them on specificity. Unlayered rules
|
|
3454
|
+
* would outrank any layered utility per the CSS cascade-layers spec.
|
|
3455
|
+
*/
|
|
3456
|
+
|
|
3457
|
+
@layer components {
|
|
3458
|
+
/* Container --------------------------------------------------------------- */
|
|
3459
|
+
|
|
3460
|
+
.seeds-panel {
|
|
3461
|
+
background: var(--color-container-bg-base);
|
|
3462
|
+
flex-grow: 0;
|
|
3463
|
+
flex-shrink: 0;
|
|
3464
|
+
overflow: hidden;
|
|
3465
|
+
border-radius: var(--radius-800);
|
|
3466
|
+
transition: flex-basis var(--duration-medium) ease-in-out,
|
|
3467
|
+
margin var(--duration-medium) ease-in-out;
|
|
3468
|
+
}
|
|
3469
|
+
|
|
3470
|
+
.seeds-panel-inner {
|
|
3471
|
+
display: flex;
|
|
3472
|
+
flex-direction: column;
|
|
3473
|
+
overflow: hidden;
|
|
3474
|
+
}
|
|
3475
|
+
|
|
3476
|
+
/* Header ------------------------------------------------------------------ */
|
|
3477
|
+
|
|
3478
|
+
.seeds-panel-header {
|
|
3479
|
+
display: flex;
|
|
3480
|
+
flex: 0 0 auto;
|
|
3481
|
+
justify-content: space-between;
|
|
3482
|
+
align-items: center;
|
|
3483
|
+
padding: var(--space-400);
|
|
3484
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
3485
|
+
}
|
|
3486
|
+
|
|
3487
|
+
/* Content ----------------------------------------------------------------- */
|
|
3488
|
+
|
|
3489
|
+
/* overflow-y (and, when headerless, display/flex-direction) are set inline
|
|
3490
|
+
by PanelContentTailwind because the tests assert them under jsdom. */
|
|
3491
|
+
.seeds-panel-content {
|
|
3492
|
+
flex: 1 1 auto;
|
|
3493
|
+
min-height: 0;
|
|
3494
|
+
padding: var(--space-450);
|
|
3495
|
+
color: var(--color-text-body);
|
|
3496
|
+
}
|
|
3497
|
+
|
|
3498
|
+
/* Headerless content renders flush; the children own all chrome/padding. */
|
|
3499
|
+
.seeds-panel-content--headerless {
|
|
3500
|
+
padding: 0;
|
|
3501
|
+
}
|
|
3502
|
+
|
|
3503
|
+
/* Footer ------------------------------------------------------------------ */
|
|
3504
|
+
|
|
3505
|
+
/* margin-bottom (var(--bleed, 0px)) is set inline by PanelFooterTailwind. */
|
|
3506
|
+
.seeds-panel-footer {
|
|
3507
|
+
flex: 0 0 auto;
|
|
3508
|
+
overflow: hidden;
|
|
3509
|
+
padding: var(--space-450);
|
|
3510
|
+
}
|
|
3511
|
+
|
|
3512
|
+
/* Mobile actions header --------------------------------------------------- */
|
|
3513
|
+
|
|
3514
|
+
.seeds-panel-mobile-actions-header {
|
|
3515
|
+
display: flex;
|
|
3516
|
+
flex: 0 0 auto;
|
|
3517
|
+
align-items: center;
|
|
3518
|
+
justify-content: space-between;
|
|
3519
|
+
padding-top: var(--space-400);
|
|
3520
|
+
padding-left: var(--space-450);
|
|
3521
|
+
padding-right: var(--space-450);
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
.seeds-panel-mobile-actions-buttons {
|
|
3525
|
+
display: flex;
|
|
3526
|
+
align-items: center;
|
|
3527
|
+
gap: var(--space-200);
|
|
3528
|
+
}
|
|
3529
|
+
}
|
|
3530
|
+
|
|
3313
3531
|
/* --- seeds-react-partner-logo --- */
|
|
3314
3532
|
/**
|
|
3315
3533
|
* Seeds Partner Logo component classes
|
|
@@ -3346,6 +3564,62 @@
|
|
|
3346
3564
|
}
|
|
3347
3565
|
}
|
|
3348
3566
|
|
|
3567
|
+
/* --- seeds-react-peek-in --- */
|
|
3568
|
+
/**
|
|
3569
|
+
* Seeds PeekIn component classes
|
|
3570
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
3571
|
+
*
|
|
3572
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
3573
|
+
* CSS variable definitions and dark mode support.
|
|
3574
|
+
*
|
|
3575
|
+
* These classes back only the root layout wrappers PeekIn authors directly
|
|
3576
|
+
* (the mobile bottom-sheet header row and the desktop main column). The rest
|
|
3577
|
+
* of PeekIn's appearance comes from the composed Seeds primitives (Modal,
|
|
3578
|
+
* Drawer, Panel, Text, Button), which own their own styling.
|
|
3579
|
+
*
|
|
3580
|
+
* Rules are wrapped in @layer components so consumer Tailwind utilities (which
|
|
3581
|
+
* live in @layer utilities) win the cascade. Without this layer the unlayered
|
|
3582
|
+
* component CSS would beat utilities like px-450 / gap-300 and they could not
|
|
3583
|
+
* override component styling. Keep every rule inside this single block.
|
|
3584
|
+
*/
|
|
3585
|
+
|
|
3586
|
+
@layer components {
|
|
3587
|
+
/* Mobile bottom-sheet header row (Drawer.Header render wrapper) */
|
|
3588
|
+
.seeds-peek-in-drawer-header {
|
|
3589
|
+
display: flex;
|
|
3590
|
+
align-items: center;
|
|
3591
|
+
justify-content: space-between;
|
|
3592
|
+
padding-top: var(--space-400);
|
|
3593
|
+
padding-right: var(--space-450);
|
|
3594
|
+
padding-left: var(--space-450);
|
|
3595
|
+
flex: 0 0 auto;
|
|
3596
|
+
}
|
|
3597
|
+
|
|
3598
|
+
/* Header left group: optional back button + title */
|
|
3599
|
+
.seeds-peek-in-titlegroup {
|
|
3600
|
+
display: flex;
|
|
3601
|
+
align-items: center;
|
|
3602
|
+
gap: var(--space-300);
|
|
3603
|
+
}
|
|
3604
|
+
|
|
3605
|
+
/* Header right group: consumer actions + inline pills/close */
|
|
3606
|
+
.seeds-peek-in-header-actions {
|
|
3607
|
+
display: flex;
|
|
3608
|
+
align-items: center;
|
|
3609
|
+
gap: var(--space-200);
|
|
3610
|
+
}
|
|
3611
|
+
|
|
3612
|
+
/* Desktop main column: header + content, alongside the optional panel */
|
|
3613
|
+
.seeds-peek-in-main {
|
|
3614
|
+
display: flex;
|
|
3615
|
+
flex-direction: column;
|
|
3616
|
+
flex: 1 1 auto;
|
|
3617
|
+
overflow: hidden;
|
|
3618
|
+
background: var(--color-container-bg-base);
|
|
3619
|
+
border-radius: var(--radius-800);
|
|
3620
|
+
}
|
|
3621
|
+
}
|
|
3622
|
+
|
|
3349
3623
|
/* --- seeds-react-profile --- */
|
|
3350
3624
|
/**
|
|
3351
3625
|
* Seeds InlineProfile component classes
|
|
@@ -3496,6 +3770,7 @@
|
|
|
3496
3770
|
gap: var(--space-300);
|
|
3497
3771
|
}
|
|
3498
3772
|
}
|
|
3773
|
+
|
|
3499
3774
|
/* --- seeds-react-profile --- */
|
|
3500
3775
|
/**
|
|
3501
3776
|
* Seeds ProfileToken component classes
|
|
@@ -3602,17 +3877,16 @@
|
|
|
3602
3877
|
border: 1px solid var(--color-form-border-base);
|
|
3603
3878
|
border-radius: 50%;
|
|
3604
3879
|
background-color: var(--color-form-bg-base);
|
|
3605
|
-
transition:
|
|
3606
|
-
border-color var(--duration-fast) ease-in,
|
|
3880
|
+
transition: border-color var(--duration-fast) ease-in,
|
|
3607
3881
|
background-color var(--duration-fast) ease-in;
|
|
3608
3882
|
}
|
|
3609
3883
|
|
|
3610
3884
|
/* Focus ring mirrors button.css (the CSS form of the focusRing mixin) */
|
|
3611
3885
|
.seeds-radio-input:focus {
|
|
3612
3886
|
outline: none;
|
|
3613
|
-
box-shadow:
|
|
3614
|
-
0 0 0
|
|
3615
|
-
|
|
3887
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
3888
|
+
0 0 0 4px
|
|
3889
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
3616
3890
|
}
|
|
3617
3891
|
|
|
3618
3892
|
.seeds-radio-wrapper:before {
|
|
@@ -3632,7 +3906,8 @@
|
|
|
3632
3906
|
|
|
3633
3907
|
/* Unchecked hover / focus: show the dot (only when NOT checked) */
|
|
3634
3908
|
.seeds-radio-wrapper:not(.seeds-radio-checked):hover .seeds-radio-input,
|
|
3635
|
-
.seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
|
|
3909
|
+
.seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
|
|
3910
|
+
.seeds-radio-input {
|
|
3636
3911
|
border-color: var(--color-form-border-base);
|
|
3637
3912
|
background-color: var(--color-form-bg-base);
|
|
3638
3913
|
}
|
|
@@ -3644,7 +3919,9 @@
|
|
|
3644
3919
|
}
|
|
3645
3920
|
|
|
3646
3921
|
/* Disabled-unchecked keeps the hover dot hidden (parity with opacity: disabled ? 0 : 1) */
|
|
3647
|
-
.seeds-radio-wrapper.seeds-radio-disabled:not(
|
|
3922
|
+
.seeds-radio-wrapper.seeds-radio-disabled:not(
|
|
3923
|
+
.seeds-radio-checked
|
|
3924
|
+
):hover:before {
|
|
3648
3925
|
opacity: 0;
|
|
3649
3926
|
}
|
|
3650
3927
|
|
|
@@ -3796,8 +4073,7 @@
|
|
|
3796
4073
|
cursor: pointer;
|
|
3797
4074
|
outline: none;
|
|
3798
4075
|
appearance: none;
|
|
3799
|
-
transition:
|
|
3800
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
4076
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
3801
4077
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
3802
4078
|
font-family: var(--font-family);
|
|
3803
4079
|
font-weight: var(--font-weight-normal);
|
|
@@ -3812,16 +4088,14 @@
|
|
|
3812
4088
|
}
|
|
3813
4089
|
|
|
3814
4090
|
.seeds-select .seeds-select-input:focus {
|
|
3815
|
-
box-shadow:
|
|
3816
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
4091
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
3817
4092
|
0 0px 0px 4px
|
|
3818
4093
|
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
3819
4094
|
outline: none;
|
|
3820
4095
|
}
|
|
3821
4096
|
|
|
3822
4097
|
/* Fix for red ring when input is marked required in Firefox */
|
|
3823
|
-
.seeds-select
|
|
3824
|
-
.seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
|
|
4098
|
+
.seeds-select .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
|
|
3825
4099
|
box-shadow: none;
|
|
3826
4100
|
}
|
|
3827
4101
|
|
|
@@ -4187,9 +4461,9 @@
|
|
|
4187
4461
|
/* Mixin for styled focus ring — copied from button.css:34-39 */
|
|
4188
4462
|
.seeds-switch:focus {
|
|
4189
4463
|
outline: none;
|
|
4190
|
-
box-shadow:
|
|
4191
|
-
0 0 0
|
|
4192
|
-
|
|
4464
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4465
|
+
0 0 0 4px
|
|
4466
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
4193
4467
|
}
|
|
4194
4468
|
|
|
4195
4469
|
/* Base styles for circle element */
|
|
@@ -4291,6 +4565,95 @@
|
|
|
4291
4565
|
}
|
|
4292
4566
|
}
|
|
4293
4567
|
|
|
4568
|
+
/* --- seeds-react-table --- */
|
|
4569
|
+
/**
|
|
4570
|
+
* Seeds v2 Table component classes
|
|
4571
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
4572
|
+
*
|
|
4573
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
4574
|
+
* CSS variable definitions and dark mode support.
|
|
4575
|
+
*
|
|
4576
|
+
* Usage:
|
|
4577
|
+
* <div class="seeds-table-v2-container" role="region" tabindex="0">
|
|
4578
|
+
* <table class="seeds-table-v2">
|
|
4579
|
+
* <caption class="seeds-table-v2-caption">Caption</caption>
|
|
4580
|
+
* <thead class="seeds-table-v2-header">
|
|
4581
|
+
* <tr class="seeds-table-v2-row">
|
|
4582
|
+
* <th class="seeds-table-v2-header-cell" scope="col">Header</th>
|
|
4583
|
+
* </tr>
|
|
4584
|
+
* </thead>
|
|
4585
|
+
* <tbody class="seeds-table-v2-body">
|
|
4586
|
+
* <tr class="seeds-table-v2-row">
|
|
4587
|
+
* <td class="seeds-table-v2-cell">Data</td>
|
|
4588
|
+
* </tr>
|
|
4589
|
+
* </tbody>
|
|
4590
|
+
* </table>
|
|
4591
|
+
* </div>
|
|
4592
|
+
*
|
|
4593
|
+
* All rules are wrapped in `@layer components` so that consumer Tailwind
|
|
4594
|
+
* utilities (unlayered) win the cascade over these styles.
|
|
4595
|
+
*/
|
|
4596
|
+
|
|
4597
|
+
@layer components {
|
|
4598
|
+
.seeds-table-v2-container {
|
|
4599
|
+
overflow-x: auto;
|
|
4600
|
+
max-width: 100%;
|
|
4601
|
+
}
|
|
4602
|
+
|
|
4603
|
+
.seeds-table-v2 {
|
|
4604
|
+
width: 100%;
|
|
4605
|
+
border-collapse: collapse;
|
|
4606
|
+
color: var(--color-text-body);
|
|
4607
|
+
font-family: var(--font-family);
|
|
4608
|
+
}
|
|
4609
|
+
|
|
4610
|
+
.seeds-table-v2-caption {
|
|
4611
|
+
text-align: left;
|
|
4612
|
+
font-size: var(--font-size-400);
|
|
4613
|
+
line-height: var(--line-height-400);
|
|
4614
|
+
font-weight: var(--font-weight-semibold);
|
|
4615
|
+
padding: var(--space-300);
|
|
4616
|
+
margin-top: var(--space-200);
|
|
4617
|
+
}
|
|
4618
|
+
|
|
4619
|
+
.seeds-table-v2-caption-hidden {
|
|
4620
|
+
position: absolute;
|
|
4621
|
+
width: 1px;
|
|
4622
|
+
height: 1px;
|
|
4623
|
+
padding: 0;
|
|
4624
|
+
margin: -1px;
|
|
4625
|
+
overflow: hidden;
|
|
4626
|
+
clip: rect(0, 0, 0, 0);
|
|
4627
|
+
border: 0;
|
|
4628
|
+
}
|
|
4629
|
+
|
|
4630
|
+
.seeds-table-v2-header {
|
|
4631
|
+
vertical-align: bottom;
|
|
4632
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
4633
|
+
}
|
|
4634
|
+
|
|
4635
|
+
.seeds-table-v2-row {
|
|
4636
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
4637
|
+
}
|
|
4638
|
+
|
|
4639
|
+
.seeds-table-v2-header-cell {
|
|
4640
|
+
font-size: var(--font-size-100);
|
|
4641
|
+
line-height: var(--line-height-100);
|
|
4642
|
+
font-weight: var(--font-weight-semibold);
|
|
4643
|
+
padding: var(--space-300);
|
|
4644
|
+
text-align: left;
|
|
4645
|
+
min-width: 0;
|
|
4646
|
+
}
|
|
4647
|
+
|
|
4648
|
+
.seeds-table-v2-cell {
|
|
4649
|
+
font-size: var(--font-size-200);
|
|
4650
|
+
line-height: var(--line-height-200);
|
|
4651
|
+
font-weight: var(--font-weight-normal);
|
|
4652
|
+
padding: var(--space-300);
|
|
4653
|
+
text-align: left;
|
|
4654
|
+
}
|
|
4655
|
+
}
|
|
4656
|
+
|
|
4294
4657
|
/* --- seeds-react-tabs --- */
|
|
4295
4658
|
/**
|
|
4296
4659
|
* Seeds Tabs component classes
|
|
@@ -4500,6 +4863,7 @@
|
|
|
4500
4863
|
line-height: var(--line-height-200);
|
|
4501
4864
|
}
|
|
4502
4865
|
}
|
|
4866
|
+
|
|
4503
4867
|
/* --- seeds-react-textarea --- */
|
|
4504
4868
|
/**
|
|
4505
4869
|
* Seeds Textarea component classes
|
|
@@ -4545,9 +4909,9 @@
|
|
|
4545
4909
|
}
|
|
4546
4910
|
|
|
4547
4911
|
.seeds-textarea-input:focus {
|
|
4548
|
-
box-shadow:
|
|
4549
|
-
0 0 0
|
|
4550
|
-
|
|
4912
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4913
|
+
0 0 0 4px
|
|
4914
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4551
4915
|
outline: none;
|
|
4552
4916
|
}
|
|
4553
4917
|
|
|
@@ -4624,8 +4988,7 @@
|
|
|
4624
4988
|
}
|
|
4625
4989
|
|
|
4626
4990
|
.seeds-token:focus {
|
|
4627
|
-
box-shadow:
|
|
4628
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
4991
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4629
4992
|
0 0px 0px 4px
|
|
4630
4993
|
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4631
4994
|
outline: none;
|
|
@@ -4658,7 +5021,11 @@
|
|
|
4658
5021
|
cursor: pointer;
|
|
4659
5022
|
box-shadow: var(--shadow-low);
|
|
4660
5023
|
border: 1px solid
|
|
4661
|
-
color-mix(
|
|
5024
|
+
color-mix(
|
|
5025
|
+
in srgb,
|
|
5026
|
+
var(--color-container-border-decorative-blue),
|
|
5027
|
+
black 20%
|
|
5028
|
+
);
|
|
4662
5029
|
}
|
|
4663
5030
|
|
|
4664
5031
|
/* disabled */
|
|
@@ -4729,7 +5096,11 @@
|
|
|
4729
5096
|
.lights-out .seeds-token-blue:hover,
|
|
4730
5097
|
.lights-out .seeds-token-blue:active {
|
|
4731
5098
|
border: 1px solid
|
|
4732
|
-
color-mix(
|
|
5099
|
+
color-mix(
|
|
5100
|
+
in srgb,
|
|
5101
|
+
var(--color-container-border-decorative-blue),
|
|
5102
|
+
white 20%
|
|
5103
|
+
);
|
|
4733
5104
|
}
|
|
4734
5105
|
|
|
4735
5106
|
[data-theme="dark"] .seeds-token-invalid:hover,
|
|
@@ -4959,14 +5330,9 @@
|
|
|
4959
5330
|
}
|
|
4960
5331
|
|
|
4961
5332
|
.seeds-tree-combobox-input-group:focus-within {
|
|
4962
|
-
box-shadow:
|
|
4963
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
5333
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4964
5334
|
0 0px 0px 4px
|
|
4965
|
-
color-mix(
|
|
4966
|
-
in srgb,
|
|
4967
|
-
var(--color-button-primary-bg-base),
|
|
4968
|
-
transparent 70%
|
|
4969
|
-
);
|
|
5335
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4970
5336
|
outline: none;
|
|
4971
5337
|
}
|
|
4972
5338
|
|
|
@@ -5023,8 +5389,7 @@
|
|
|
5023
5389
|
cursor: default;
|
|
5024
5390
|
outline: none;
|
|
5025
5391
|
user-select: none;
|
|
5026
|
-
transition:
|
|
5027
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
5392
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
5028
5393
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
5029
5394
|
}
|
|
5030
5395
|
|
|
@@ -5033,14 +5398,9 @@
|
|
|
5033
5398
|
}
|
|
5034
5399
|
|
|
5035
5400
|
.seeds-tree-select-trigger:focus-visible {
|
|
5036
|
-
box-shadow:
|
|
5037
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
5401
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
5038
5402
|
0 0px 0px 4px
|
|
5039
|
-
color-mix(
|
|
5040
|
-
in srgb,
|
|
5041
|
-
var(--color-button-primary-bg-base),
|
|
5042
|
-
transparent 70%
|
|
5043
|
-
);
|
|
5403
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
5044
5404
|
outline: none;
|
|
5045
5405
|
}
|
|
5046
5406
|
|