@sproutsocial/racine 31.7.14 → 31.7.16
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 +29 -0
- package/README.NPM.md +1 -1
- package/README.md +19 -3
- package/dist/components.css +1221 -744
- package/package.json +12 -12
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
|
|
|
@@ -521,7 +522,6 @@
|
|
|
521
522
|
*/
|
|
522
523
|
|
|
523
524
|
@layer components {
|
|
524
|
-
|
|
525
525
|
.seeds-btn {
|
|
526
526
|
display: inline-block;
|
|
527
527
|
box-sizing: border-box;
|
|
@@ -544,9 +544,9 @@
|
|
|
544
544
|
|
|
545
545
|
.seeds-btn:focus {
|
|
546
546
|
outline: none;
|
|
547
|
-
box-shadow:
|
|
548
|
-
0 0 0
|
|
549
|
-
|
|
547
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
548
|
+
0 0 0 4px
|
|
549
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
550
550
|
}
|
|
551
551
|
|
|
552
552
|
/* KNOWN ISSUE: `small` currently renders identically to the default size — both use
|
|
@@ -676,8 +676,7 @@
|
|
|
676
676
|
border-radius: inherit;
|
|
677
677
|
padding: 1px;
|
|
678
678
|
background: var(--color-gradient-ai);
|
|
679
|
-
-webkit-mask:
|
|
680
|
-
linear-gradient(#fff 0 0) content-box,
|
|
679
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
|
681
680
|
linear-gradient(#fff 0 0);
|
|
682
681
|
-webkit-mask-composite: xor;
|
|
683
682
|
mask-composite: exclude;
|
|
@@ -747,10 +746,45 @@
|
|
|
747
746
|
color: var(--color-button-pill-text-hover);
|
|
748
747
|
background-color: var(--color-button-pill-bg-active);
|
|
749
748
|
}
|
|
750
|
-
|
|
751
749
|
}
|
|
752
750
|
|
|
753
751
|
/* end @layer components */
|
|
752
|
+
|
|
753
|
+
/* --- seeds-react-character-counter --- */
|
|
754
|
+
/**
|
|
755
|
+
* Seeds CharacterCounter component classes
|
|
756
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
757
|
+
*
|
|
758
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
759
|
+
* CSS variable definitions and dark mode support.
|
|
760
|
+
*
|
|
761
|
+
* Usage:
|
|
762
|
+
* <div class="seeds-character-counter" role="status">5</div>
|
|
763
|
+
*
|
|
764
|
+
* Rules live in `@layer components` so that consumer Tailwind utilities
|
|
765
|
+
* (e.g. `mx-200`, `p-300`) win in the cascade and can override these component
|
|
766
|
+
* styles, rather than tying/beating them on specificity.
|
|
767
|
+
*/
|
|
768
|
+
|
|
769
|
+
@layer components {
|
|
770
|
+
.seeds-character-counter {
|
|
771
|
+
font-family: var(--font-family);
|
|
772
|
+
font-size: var(--font-size-200);
|
|
773
|
+
line-height: 1;
|
|
774
|
+
font-weight: var(--font-weight-semibold);
|
|
775
|
+
font-variant-numeric: tabular-nums;
|
|
776
|
+
color: var(--color-text-subtext);
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.seeds-character-counter-mini {
|
|
780
|
+
font-size: var(--font-size-100);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.seeds-character-counter-overlimit {
|
|
784
|
+
color: var(--color-text-error);
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
|
|
754
788
|
/* --- seeds-react-chat-bubble --- */
|
|
755
789
|
/**
|
|
756
790
|
* Seeds ChatBubble component classes
|
|
@@ -983,9 +1017,9 @@
|
|
|
983
1017
|
|
|
984
1018
|
.seeds-content-header-trigger:focus-visible {
|
|
985
1019
|
outline: none;
|
|
986
|
-
box-shadow:
|
|
987
|
-
0 0 0
|
|
988
|
-
|
|
1020
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
1021
|
+
0 0 0 4px
|
|
1022
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
989
1023
|
}
|
|
990
1024
|
}
|
|
991
1025
|
|
|
@@ -1149,8 +1183,12 @@
|
|
|
1149
1183
|
transform: translateX(-100%);
|
|
1150
1184
|
}
|
|
1151
1185
|
|
|
1152
|
-
.seeds-drawer-popup--bottom:not(
|
|
1153
|
-
|
|
1186
|
+
.seeds-drawer-popup--bottom:not(
|
|
1187
|
+
.seeds-drawer-popup--snap
|
|
1188
|
+
)[data-starting-style],
|
|
1189
|
+
.seeds-drawer-popup--bottom:not(
|
|
1190
|
+
.seeds-drawer-popup--snap
|
|
1191
|
+
)[data-ending-style] {
|
|
1154
1192
|
transform: translateY(calc(100% - var(--bleed) + 2px));
|
|
1155
1193
|
}
|
|
1156
1194
|
|
|
@@ -1164,8 +1202,12 @@
|
|
|
1164
1202
|
RAIL_OFFSET). Translating the popup by its own height alone leaves the rail
|
|
1165
1203
|
visible at the bottom of the viewport during enter/exit, so we add the rail's
|
|
1166
1204
|
outset: RAIL_BUTTON_HEIGHT (32) + RAIL_OFFSET (12) = 44px. */
|
|
1167
|
-
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1168
|
-
|
|
1205
|
+
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1206
|
+
.seeds-drawer-popup--snap
|
|
1207
|
+
)[data-starting-style],
|
|
1208
|
+
.seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
|
|
1209
|
+
.seeds-drawer-popup--snap
|
|
1210
|
+
)[data-ending-style] {
|
|
1169
1211
|
transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
|
|
1170
1212
|
}
|
|
1171
1213
|
|
|
@@ -1191,7 +1233,9 @@
|
|
|
1191
1233
|
/* Bottom non-snap stacked bottom-sheet animation. Snap-point drawers don't
|
|
1192
1234
|
participate: the stack math overwrites --translate-y and clips overflow,
|
|
1193
1235
|
which collides with base-ui's snap-offset transform. */
|
|
1194
|
-
.seeds-drawer-popup--bottom:not(
|
|
1236
|
+
.seeds-drawer-popup--bottom:not(
|
|
1237
|
+
.seeds-drawer-popup--snap
|
|
1238
|
+
)[data-nested-drawer-open] {
|
|
1195
1239
|
--stack-step: 0.05;
|
|
1196
1240
|
--stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
|
|
1197
1241
|
/* Override default vars; base transform rule picks them up automatically */
|
|
@@ -1275,6 +1319,95 @@
|
|
|
1275
1319
|
}
|
|
1276
1320
|
}
|
|
1277
1321
|
|
|
1322
|
+
/* --- seeds-react-duration --- */
|
|
1323
|
+
/**
|
|
1324
|
+
* Seeds Duration component classes
|
|
1325
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
1326
|
+
*
|
|
1327
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
1328
|
+
* CSS variable definitions and dark mode support (consistent with other Seeds
|
|
1329
|
+
* components). font-variant-numeric has no design token, so this rule uses none.
|
|
1330
|
+
*
|
|
1331
|
+
* Usage:
|
|
1332
|
+
* <span class="seeds-duration">1m 30s</span>
|
|
1333
|
+
*/
|
|
1334
|
+
|
|
1335
|
+
@layer components {
|
|
1336
|
+
.seeds-duration {
|
|
1337
|
+
font-variant-numeric: tabular-nums;
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
/* --- seeds-react-empty-state --- */
|
|
1342
|
+
/**
|
|
1343
|
+
* Seeds EmptyState component classes
|
|
1344
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
1345
|
+
*
|
|
1346
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
1347
|
+
* CSS variable definitions and dark mode support.
|
|
1348
|
+
*
|
|
1349
|
+
* Usage:
|
|
1350
|
+
* <div class="seeds-empty-state">...</div>
|
|
1351
|
+
*
|
|
1352
|
+
* Rules live in @layer components so that consumer Tailwind utilities
|
|
1353
|
+
* (e.g. mx-200, p-300) win in the cascade and can override these component
|
|
1354
|
+
* styles, rather than tying/beating them on specificity.
|
|
1355
|
+
*/
|
|
1356
|
+
|
|
1357
|
+
@layer components {
|
|
1358
|
+
.seeds-empty-state {
|
|
1359
|
+
max-width: 400px;
|
|
1360
|
+
margin-inline: auto;
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
.seeds-empty-state-media {
|
|
1364
|
+
display: flex;
|
|
1365
|
+
flex-direction: column;
|
|
1366
|
+
justify-content: center;
|
|
1367
|
+
margin-bottom: var(--space-450);
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.seeds-empty-state-content {
|
|
1371
|
+
text-align: center;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.seeds-empty-state-headline {
|
|
1375
|
+
margin: 0;
|
|
1376
|
+
padding-left: 0;
|
|
1377
|
+
padding-right: 0;
|
|
1378
|
+
font-family: var(--font-family);
|
|
1379
|
+
color: var(--color-text-headline);
|
|
1380
|
+
font-weight: var(--font-weight-semibold);
|
|
1381
|
+
font-size: var(--font-size-400);
|
|
1382
|
+
line-height: var(--line-height-400);
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
.seeds-empty-state-subtext {
|
|
1386
|
+
margin: 0;
|
|
1387
|
+
margin-top: var(--space-400);
|
|
1388
|
+
padding-left: 0;
|
|
1389
|
+
padding-right: 0;
|
|
1390
|
+
font-family: var(--font-family);
|
|
1391
|
+
color: var(--color-text-subtext);
|
|
1392
|
+
font-weight: var(--font-weight-normal);
|
|
1393
|
+
font-size: var(--font-size-200);
|
|
1394
|
+
line-height: var(--line-height-200);
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
.seeds-empty-state-actions {
|
|
1398
|
+
margin-top: var(--space-450);
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1401
|
+
/* -empty MUST follow the base rule: equal specificity, source order wins */
|
|
1402
|
+
.seeds-empty-state-actions-empty {
|
|
1403
|
+
margin-top: 0;
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
.seeds-empty-state-secondary-action {
|
|
1407
|
+
margin-top: var(--space-400);
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1278
1411
|
/* --- seeds-react-fieldset --- */
|
|
1279
1412
|
/**
|
|
1280
1413
|
* Seeds Fieldset component classes
|
|
@@ -1378,6 +1511,95 @@
|
|
|
1378
1511
|
}
|
|
1379
1512
|
}
|
|
1380
1513
|
|
|
1514
|
+
/* --- seeds-react-grid --- */
|
|
1515
|
+
/**
|
|
1516
|
+
* Seeds Grid component classes.
|
|
1517
|
+
*
|
|
1518
|
+
* Scalar column/gap values are applied inline by GridTailwind (jsdom-safe and
|
|
1519
|
+
* they win over these rules). These rules provide sane defaults and drive the
|
|
1520
|
+
* responsive cases: GridTailwind sets --sg-* custom properties per breakpoint
|
|
1521
|
+
* and the media queries below promote them, resolving the sm -> md -> lg -> xl
|
|
1522
|
+
* cascade. Breakpoints match @sproutsocial/seeds-react-theme
|
|
1523
|
+
* (sm 640 / md 768 / lg 1024 / xl 1280).
|
|
1524
|
+
*
|
|
1525
|
+
* All rules are wrapped in `@layer components` so consumer Tailwind utilities
|
|
1526
|
+
* (unlayered) win the cascade, matching button.css.
|
|
1527
|
+
*/
|
|
1528
|
+
|
|
1529
|
+
@layer components {
|
|
1530
|
+
.seeds-grid {
|
|
1531
|
+
display: grid;
|
|
1532
|
+
grid-template-columns: var(--sg-cols, repeat(1, 1fr));
|
|
1533
|
+
row-gap: var(--sg-row-gap, 0);
|
|
1534
|
+
column-gap: var(--sg-col-gap, 0);
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
@media (min-width: 640px) {
|
|
1538
|
+
.seeds-grid {
|
|
1539
|
+
grid-template-columns: var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)));
|
|
1540
|
+
row-gap: var(--sg-row-gap-sm, var(--sg-row-gap, 0));
|
|
1541
|
+
column-gap: var(--sg-col-gap-sm, var(--sg-col-gap, 0));
|
|
1542
|
+
}
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
@media (min-width: 768px) {
|
|
1546
|
+
.seeds-grid {
|
|
1547
|
+
grid-template-columns: var(
|
|
1548
|
+
--sg-cols-md,
|
|
1549
|
+
var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)))
|
|
1550
|
+
);
|
|
1551
|
+
row-gap: var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)));
|
|
1552
|
+
column-gap: var(
|
|
1553
|
+
--sg-col-gap-md,
|
|
1554
|
+
var(--sg-col-gap-sm, var(--sg-col-gap, 0))
|
|
1555
|
+
);
|
|
1556
|
+
}
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
@media (min-width: 1024px) {
|
|
1560
|
+
.seeds-grid {
|
|
1561
|
+
grid-template-columns: var(
|
|
1562
|
+
--sg-cols-lg,
|
|
1563
|
+
var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
|
|
1564
|
+
);
|
|
1565
|
+
row-gap: var(
|
|
1566
|
+
--sg-row-gap-lg,
|
|
1567
|
+
var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
|
|
1568
|
+
);
|
|
1569
|
+
column-gap: var(
|
|
1570
|
+
--sg-col-gap-lg,
|
|
1571
|
+
var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
|
|
1572
|
+
);
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
@media (min-width: 1280px) {
|
|
1577
|
+
.seeds-grid {
|
|
1578
|
+
grid-template-columns: var(
|
|
1579
|
+
--sg-cols-xl,
|
|
1580
|
+
var(
|
|
1581
|
+
--sg-cols-lg,
|
|
1582
|
+
var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
|
|
1583
|
+
)
|
|
1584
|
+
);
|
|
1585
|
+
row-gap: var(
|
|
1586
|
+
--sg-row-gap-xl,
|
|
1587
|
+
var(
|
|
1588
|
+
--sg-row-gap-lg,
|
|
1589
|
+
var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
|
|
1590
|
+
)
|
|
1591
|
+
);
|
|
1592
|
+
column-gap: var(
|
|
1593
|
+
--sg-col-gap-xl,
|
|
1594
|
+
var(
|
|
1595
|
+
--sg-col-gap-lg,
|
|
1596
|
+
var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
|
|
1597
|
+
)
|
|
1598
|
+
);
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1381
1603
|
/* --- seeds-react-icon --- */
|
|
1382
1604
|
/**
|
|
1383
1605
|
* Seeds Icon component classes
|
|
@@ -1416,6 +1638,26 @@
|
|
|
1416
1638
|
}
|
|
1417
1639
|
}
|
|
1418
1640
|
|
|
1641
|
+
/* --- seeds-react-image --- */
|
|
1642
|
+
/**
|
|
1643
|
+
* Seeds Image component classes
|
|
1644
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
1645
|
+
*
|
|
1646
|
+
* Usage:
|
|
1647
|
+
* <img class="seeds-image" />
|
|
1648
|
+
* <img class="seeds-image seeds-image-loading" />
|
|
1649
|
+
*/
|
|
1650
|
+
|
|
1651
|
+
@layer components {
|
|
1652
|
+
.seeds-image {
|
|
1653
|
+
display: block;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.seeds-image-loading {
|
|
1657
|
+
opacity: 0;
|
|
1658
|
+
}
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1419
1661
|
/* --- seeds-react-indicator --- */
|
|
1420
1662
|
/**
|
|
1421
1663
|
* Seeds Indicator component classes
|
|
@@ -1481,8 +1723,7 @@
|
|
|
1481
1723
|
background-color: var(--color-form-bg-base);
|
|
1482
1724
|
color: var(--color-text-body);
|
|
1483
1725
|
outline: none;
|
|
1484
|
-
transition:
|
|
1485
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
1726
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
1486
1727
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
1487
1728
|
font-family: var(--font-family);
|
|
1488
1729
|
font-weight: var(--font-weight-normal);
|
|
@@ -1508,9 +1749,9 @@
|
|
|
1508
1749
|
|
|
1509
1750
|
.seeds-input input:focus {
|
|
1510
1751
|
outline: none;
|
|
1511
|
-
box-shadow:
|
|
1512
|
-
0 0 0
|
|
1513
|
-
|
|
1752
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
1753
|
+
0 0 0 4px
|
|
1754
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
1514
1755
|
}
|
|
1515
1756
|
|
|
1516
1757
|
/* Fix for red ring when input is marked required in Firefox */
|
|
@@ -1672,9 +1913,9 @@
|
|
|
1672
1913
|
|
|
1673
1914
|
.seeds-link:focus {
|
|
1674
1915
|
outline: none;
|
|
1675
|
-
box-shadow:
|
|
1676
|
-
0 0 0
|
|
1677
|
-
|
|
1916
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
1917
|
+
0 0 0 4px
|
|
1918
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
1678
1919
|
}
|
|
1679
1920
|
|
|
1680
1921
|
.seeds-link:focus:active {
|
|
@@ -1862,31 +2103,29 @@
|
|
|
1862
2103
|
*/
|
|
1863
2104
|
|
|
1864
2105
|
@layer components {
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
/* Subtle (default): the 20% AI gradient tint composited over the base
|
|
2106
|
+
.seeds-ai-container {
|
|
2107
|
+
position: relative;
|
|
2108
|
+
overflow: hidden;
|
|
2109
|
+
box-sizing: border-box;
|
|
2110
|
+
border-radius: var(--radius-800);
|
|
2111
|
+
box-shadow: var(--shadow-low);
|
|
2112
|
+
font-family: var(--font-family);
|
|
2113
|
+
/* Subtle (default): the 20% AI gradient tint composited over the base
|
|
1874
2114
|
surface. --color-gradient-ai-subtle is already translucent, so layering it
|
|
1875
2115
|
over the opaque base color produces the soft wash. */
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
}
|
|
2116
|
+
background-color: var(--color-container-bg-base);
|
|
2117
|
+
background-image: var(--color-gradient-ai-subtle);
|
|
2118
|
+
color: var(--color-text-headline);
|
|
2119
|
+
}
|
|
1880
2120
|
|
|
1881
|
-
/* Vivid: the full-saturation AI gradient with white content. White has no
|
|
2121
|
+
/* Vivid: the full-saturation AI gradient with white content. White has no
|
|
1882
2122
|
semantic Seeds token; it is part of the AI gradient treatment (mirrors the
|
|
1883
2123
|
raw brand hex used in --color-gradient-ai). */
|
|
1884
|
-
.seeds-ai-container-vivid {
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
}
|
|
1889
|
-
|
|
2124
|
+
.seeds-ai-container-vivid {
|
|
2125
|
+
background-color: transparent;
|
|
2126
|
+
background-image: var(--color-gradient-ai);
|
|
2127
|
+
color: #fff;
|
|
2128
|
+
}
|
|
1890
2129
|
}
|
|
1891
2130
|
|
|
1892
2131
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -1902,30 +2141,28 @@
|
|
|
1902
2141
|
*/
|
|
1903
2142
|
|
|
1904
2143
|
@layer components {
|
|
1905
|
-
|
|
1906
|
-
/* A solid gray pill matching the design: background and border are both the
|
|
2144
|
+
/* A solid gray pill matching the design: background and border are both the
|
|
1907
2145
|
#dee1e1 container-border-base token, which also tracks dark mode. The two
|
|
1908
2146
|
pixel literals below have no exact theme token — the --space scale skips 6px
|
|
1909
2147
|
(4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
|
|
1910
2148
|
values are kept verbatim. All colors use tokens. */
|
|
1911
|
-
.seeds-eyebrow-token {
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
}
|
|
1928
|
-
|
|
2149
|
+
.seeds-eyebrow-token {
|
|
2150
|
+
box-sizing: border-box;
|
|
2151
|
+
display: inline-flex;
|
|
2152
|
+
align-items: center;
|
|
2153
|
+
justify-content: center;
|
|
2154
|
+
gap: var(--space-100); /* 2px */
|
|
2155
|
+
padding: var(--space-100) var(--space-300); /* 2px / 8px */
|
|
2156
|
+
border: 1px solid var(--color-container-border-base); /* #dee1e1 */
|
|
2157
|
+
border-radius: var(--radius-500); /* 6px */
|
|
2158
|
+
background-color: var(--color-container-border-base); /* #dee1e1 */
|
|
2159
|
+
font-family: var(--font-family);
|
|
2160
|
+
font-size: 12px; /* text-sm */
|
|
2161
|
+
line-height: 20px;
|
|
2162
|
+
font-weight: var(--font-weight-normal);
|
|
2163
|
+
color: var(--color-text-body);
|
|
2164
|
+
white-space: nowrap;
|
|
2165
|
+
}
|
|
1929
2166
|
}
|
|
1930
2167
|
|
|
1931
2168
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -1944,167 +2181,175 @@
|
|
|
1944
2181
|
*/
|
|
1945
2182
|
|
|
1946
2183
|
@layer components {
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
2184
|
+
.seeds-metric-highlight {
|
|
2185
|
+
box-sizing: border-box;
|
|
2186
|
+
display: flex;
|
|
2187
|
+
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
1952
2188
|
can't sit side by side (narrow cards / mobile). The metric block claims its
|
|
1953
2189
|
min-content width below, so a cramped row drops the chart down rather than
|
|
1954
2190
|
overflowing the card and getting clipped by the container. */
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
2191
|
+
flex-wrap: wrap;
|
|
2192
|
+
align-items: flex-start;
|
|
2193
|
+
gap: var(--space-350); /* 12px */
|
|
2194
|
+
border-radius: var(--radius-800); /* 12px */
|
|
2195
|
+
font-family: var(--font-family);
|
|
2196
|
+
/* Container (default): a padded gray app surface (matches the design's
|
|
1961
2197
|
#f3f4f4 box). `-bare` strips it. */
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
}
|
|
2198
|
+
padding: var(--space-400) var(--space-450); /* 16px / 24px */
|
|
2199
|
+
background-color: var(--color-app-bg-base);
|
|
2200
|
+
}
|
|
1965
2201
|
|
|
1966
|
-
.seeds-metric-highlight-bare {
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
}
|
|
2202
|
+
.seeds-metric-highlight-bare {
|
|
2203
|
+
padding: 0;
|
|
2204
|
+
background-color: transparent;
|
|
2205
|
+
}
|
|
1970
2206
|
|
|
1971
|
-
.seeds-metric-highlight-vertical {
|
|
1972
|
-
|
|
1973
|
-
}
|
|
2207
|
+
.seeds-metric-highlight-vertical {
|
|
2208
|
+
flex-direction: column;
|
|
2209
|
+
}
|
|
1974
2210
|
|
|
1975
|
-
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
1976
|
-
.seeds-metric-highlight-metric {
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
2211
|
+
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
2212
|
+
.seeds-metric-highlight-metric {
|
|
2213
|
+
box-sizing: border-box;
|
|
2214
|
+
display: flex;
|
|
2215
|
+
flex-direction: column;
|
|
2216
|
+
align-items: flex-start;
|
|
2217
|
+
gap: var(--space-200); /* 4px */
|
|
2218
|
+
/* Grow to fill the row, but never shrink below the metric's own content
|
|
1983
2219
|
(the nowrap value + trend pill). That min-content floor is what forces the
|
|
1984
2220
|
chart to wrap below on narrow cards instead of the row overflowing. */
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
}
|
|
2221
|
+
flex: 1 1 auto;
|
|
2222
|
+
min-width: min-content;
|
|
2223
|
+
}
|
|
1988
2224
|
|
|
1989
|
-
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
}
|
|
2225
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
2226
|
+
width: 100%;
|
|
2227
|
+
flex: 0 0 auto;
|
|
2228
|
+
}
|
|
1993
2229
|
|
|
1994
|
-
/* Small: label and value collapse onto a single centered row. */
|
|
1995
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
}
|
|
2230
|
+
/* Small: label and value collapse onto a single centered row. */
|
|
2231
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
2232
|
+
flex-direction: row;
|
|
2233
|
+
align-items: center;
|
|
2234
|
+
gap: var(--space-300); /* 8px */
|
|
2235
|
+
}
|
|
2000
2236
|
|
|
2001
|
-
.seeds-metric-highlight-label {
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
}
|
|
2237
|
+
.seeds-metric-highlight-label {
|
|
2238
|
+
margin: 0;
|
|
2239
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2240
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
2241
|
+
font-weight: var(--font-weight-normal);
|
|
2242
|
+
color: var(--color-text-body);
|
|
2243
|
+
overflow-wrap: break-word;
|
|
2244
|
+
}
|
|
2009
2245
|
|
|
2010
|
-
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
2011
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
}
|
|
2246
|
+
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
2247
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
2248
|
+
flex: 1 0 0;
|
|
2249
|
+
min-width: 0;
|
|
2250
|
+
}
|
|
2015
2251
|
|
|
2016
|
-
.seeds-metric-highlight-value-row {
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
}
|
|
2252
|
+
.seeds-metric-highlight-value-row {
|
|
2253
|
+
display: flex;
|
|
2254
|
+
flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
|
|
2255
|
+
align-items: center;
|
|
2256
|
+
gap: var(--space-300); /* 8px */
|
|
2257
|
+
}
|
|
2022
2258
|
|
|
2023
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
2024
|
-
|
|
2025
|
-
}
|
|
2259
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
2260
|
+
justify-content: flex-end;
|
|
2261
|
+
}
|
|
2026
2262
|
|
|
2027
|
-
.seeds-metric-highlight-value {
|
|
2028
|
-
|
|
2029
|
-
|
|
2263
|
+
.seeds-metric-highlight-value {
|
|
2264
|
+
margin: 0;
|
|
2265
|
+
/* No mono token exists yet; fall back to a system monospace stack. Mirrors the
|
|
2030
2266
|
font/font-mono treatment in the design. */
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2267
|
+
font-family: var(
|
|
2268
|
+
--font-family-mono,
|
|
2269
|
+
ui-monospace,
|
|
2270
|
+
"SF Mono",
|
|
2271
|
+
SFMono-Regular,
|
|
2272
|
+
Menlo,
|
|
2273
|
+
monospace
|
|
2274
|
+
);
|
|
2275
|
+
font-size: var(--font-size-700); /* 32px */
|
|
2276
|
+
line-height: var(--line-height-700); /* 40px */
|
|
2277
|
+
font-weight: var(--font-weight-bold);
|
|
2278
|
+
color: var(--color-text-headline);
|
|
2279
|
+
white-space: nowrap;
|
|
2280
|
+
}
|
|
2038
2281
|
|
|
2039
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-value {
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
}
|
|
2282
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value {
|
|
2283
|
+
font-size: var(--font-size-600); /* 24px */
|
|
2284
|
+
line-height: var(--line-height-600); /* 32px */
|
|
2285
|
+
}
|
|
2043
2286
|
|
|
2044
|
-
/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
|
|
2287
|
+
/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
|
|
2045
2288
|
swaps to the negative (red) treatment. Color flows to the arrow + value via
|
|
2046
2289
|
currentColor. */
|
|
2047
|
-
.seeds-metric-highlight-trend {
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
}
|
|
2290
|
+
.seeds-metric-highlight-trend {
|
|
2291
|
+
display: inline-flex;
|
|
2292
|
+
align-items: center;
|
|
2293
|
+
gap: var(--space-200); /* 4px */
|
|
2294
|
+
padding: var(--space-100) var(--space-300); /* 2px / 8px */
|
|
2295
|
+
border-radius: 999px;
|
|
2296
|
+
font-size: var(--font-size-200); /* 13px */
|
|
2297
|
+
line-height: var(--line-height-200);
|
|
2298
|
+
font-weight: var(--font-weight-bold);
|
|
2299
|
+
white-space: nowrap;
|
|
2300
|
+
background-color: var(--color-container-bg-decorative-green);
|
|
2301
|
+
color: var(--color-text-decorative-green);
|
|
2302
|
+
}
|
|
2060
2303
|
|
|
2061
|
-
.seeds-metric-highlight-trend-down {
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
}
|
|
2304
|
+
.seeds-metric-highlight-trend-down {
|
|
2305
|
+
background-color: var(--color-container-bg-decorative-red);
|
|
2306
|
+
color: var(--color-text-decorative-red);
|
|
2307
|
+
}
|
|
2065
2308
|
|
|
2066
|
-
.seeds-metric-highlight-trend-arrow {
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
}
|
|
2309
|
+
.seeds-metric-highlight-trend-arrow {
|
|
2310
|
+
flex: 0 0 auto;
|
|
2311
|
+
width: 1em;
|
|
2312
|
+
height: 1em;
|
|
2313
|
+
stroke: currentColor;
|
|
2314
|
+
stroke-width: 1.5;
|
|
2315
|
+
}
|
|
2073
2316
|
|
|
2074
|
-
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
2317
|
+
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
2075
2318
|
stroke/background styling, so the injected chart controls its own look. Heights
|
|
2076
2319
|
are explicit (never percentage/stretch) so a Highcharts chart always measures a
|
|
2077
2320
|
concrete container instead of falling back to its 400px default. */
|
|
2078
|
-
.seeds-metric-highlight-chart {
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2321
|
+
.seeds-metric-highlight-chart {
|
|
2322
|
+
box-sizing: border-box;
|
|
2323
|
+
flex: 0 0 auto;
|
|
2324
|
+
align-self: center;
|
|
2325
|
+
/* Center the injected chart as a flex item — an inline/inline-block child
|
|
2083
2326
|
(e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
|
|
2084
2327
|
descender space below it, reading as vertically off-center in the slot. */
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
}
|
|
2088
|
-
|
|
2089
|
-
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
|
|
2090
|
-
width: 104px;
|
|
2091
|
-
height: 48px;
|
|
2092
|
-
}
|
|
2328
|
+
display: flex;
|
|
2329
|
+
align-items: center;
|
|
2330
|
+
}
|
|
2093
2331
|
|
|
2094
|
-
.seeds-metric-highlight
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2332
|
+
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
|
|
2333
|
+
.seeds-metric-highlight-chart {
|
|
2334
|
+
width: 104px;
|
|
2335
|
+
height: 48px;
|
|
2336
|
+
}
|
|
2098
2337
|
|
|
2099
|
-
.seeds-metric-highlight-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2338
|
+
.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
|
|
2339
|
+
.seeds-metric-highlight-chart {
|
|
2340
|
+
width: 88px;
|
|
2341
|
+
height: 40px;
|
|
2342
|
+
}
|
|
2103
2343
|
|
|
2104
|
-
.seeds-metric-highlight-vertical
|
|
2105
|
-
|
|
2106
|
-
|
|
2344
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
|
|
2345
|
+
width: 100%;
|
|
2346
|
+
height: 96px;
|
|
2347
|
+
}
|
|
2107
2348
|
|
|
2349
|
+
.seeds-metric-highlight-vertical.seeds-metric-highlight-small
|
|
2350
|
+
.seeds-metric-highlight-chart {
|
|
2351
|
+
height: 56px;
|
|
2352
|
+
}
|
|
2108
2353
|
}
|
|
2109
2354
|
|
|
2110
2355
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2124,45 +2369,43 @@
|
|
|
2124
2369
|
*/
|
|
2125
2370
|
|
|
2126
2371
|
@layer components {
|
|
2372
|
+
/* Main container — horizontal layout with avatar, social icon, and user name. */
|
|
2373
|
+
.seeds-narrative-attribution {
|
|
2374
|
+
box-sizing: border-box;
|
|
2375
|
+
display: flex;
|
|
2376
|
+
align-items: center;
|
|
2377
|
+
gap: var(--space-300); /* 8px */
|
|
2378
|
+
font-family: var(--font-family);
|
|
2379
|
+
}
|
|
2127
2380
|
|
|
2128
|
-
/*
|
|
2129
|
-
.seeds-narrative-attribution {
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
}
|
|
2136
|
-
|
|
2137
|
-
/* Circular avatar image — fixed size with rounded corners. */
|
|
2138
|
-
.seeds-narrative-attribution-avatar {
|
|
2139
|
-
width: var(--space-450); /* 24px */
|
|
2140
|
-
height: var(--space-450); /* 24px */
|
|
2141
|
-
border-radius: var(--radius-circular); /* 50% */
|
|
2142
|
-
object-fit: cover;
|
|
2143
|
-
flex-shrink: 0;
|
|
2144
|
-
}
|
|
2145
|
-
|
|
2146
|
-
/* Social network icon container — flexible sizing for partner logos. */
|
|
2147
|
-
.seeds-narrative-attribution-social-icon {
|
|
2148
|
-
flex-shrink: 0;
|
|
2149
|
-
display: flex;
|
|
2150
|
-
align-items: center;
|
|
2151
|
-
justify-content: center;
|
|
2152
|
-
}
|
|
2381
|
+
/* Circular avatar image — fixed size with rounded corners. */
|
|
2382
|
+
.seeds-narrative-attribution-avatar {
|
|
2383
|
+
width: var(--space-450); /* 24px */
|
|
2384
|
+
height: var(--space-450); /* 24px */
|
|
2385
|
+
border-radius: var(--radius-circular); /* 50% */
|
|
2386
|
+
object-fit: cover;
|
|
2387
|
+
flex-shrink: 0;
|
|
2388
|
+
}
|
|
2153
2389
|
|
|
2154
|
-
/*
|
|
2155
|
-
.seeds-narrative-attribution-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
font-style: normal;
|
|
2162
|
-
font-weight: var(--font-weight-bold, 700);
|
|
2163
|
-
line-height: var(--text-base-line-height, 24px);
|
|
2164
|
-
}
|
|
2390
|
+
/* Social network icon container — flexible sizing for partner logos. */
|
|
2391
|
+
.seeds-narrative-attribution-social-icon {
|
|
2392
|
+
flex-shrink: 0;
|
|
2393
|
+
display: flex;
|
|
2394
|
+
align-items: center;
|
|
2395
|
+
justify-content: center;
|
|
2396
|
+
}
|
|
2165
2397
|
|
|
2398
|
+
/* User name text — bold headline text with ellipsis overflow. */
|
|
2399
|
+
.seeds-narrative-attribution-user-name {
|
|
2400
|
+
overflow: hidden;
|
|
2401
|
+
color: var(--color-text-headline);
|
|
2402
|
+
text-overflow: ellipsis;
|
|
2403
|
+
font-family: var(--font-family);
|
|
2404
|
+
font-size: var(--text-base-font-size, 14px);
|
|
2405
|
+
font-style: normal;
|
|
2406
|
+
font-weight: var(--font-weight-bold, 700);
|
|
2407
|
+
line-height: var(--text-base-line-height, 24px);
|
|
2408
|
+
}
|
|
2166
2409
|
}
|
|
2167
2410
|
|
|
2168
2411
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2178,22 +2421,21 @@
|
|
|
2178
2421
|
*/
|
|
2179
2422
|
|
|
2180
2423
|
@layer components {
|
|
2424
|
+
.seeds-narrative-container {
|
|
2425
|
+
position: relative;
|
|
2426
|
+
overflow: hidden;
|
|
2427
|
+
box-sizing: border-box;
|
|
2428
|
+
display: flex;
|
|
2429
|
+
flex-direction: column;
|
|
2430
|
+
align-items: stretch;
|
|
2431
|
+
padding: var(--space-500);
|
|
2432
|
+
border-radius: var(--radius-800);
|
|
2433
|
+
box-shadow: var(--shadow-low);
|
|
2434
|
+
background-color: var(--color-container-bg-base);
|
|
2435
|
+
font-family: var(--font-family);
|
|
2436
|
+
}
|
|
2181
2437
|
|
|
2182
|
-
|
|
2183
|
-
position: relative;
|
|
2184
|
-
overflow: hidden;
|
|
2185
|
-
box-sizing: border-box;
|
|
2186
|
-
display: flex;
|
|
2187
|
-
flex-direction: column;
|
|
2188
|
-
align-items: stretch;
|
|
2189
|
-
padding: var(--space-500);
|
|
2190
|
-
border-radius: var(--radius-800);
|
|
2191
|
-
box-shadow: var(--shadow-low);
|
|
2192
|
-
background-color: var(--color-container-bg-base);
|
|
2193
|
-
font-family: var(--font-family);
|
|
2194
|
-
}
|
|
2195
|
-
|
|
2196
|
-
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
2438
|
+
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
2197
2439
|
their own min-content. A wide row of widgets (a metric grid, a card grid) then
|
|
2198
2440
|
forces its column wider than the padded surface — and since the container clips
|
|
2199
2441
|
with overflow:hidden, the excess is cut off at the edge, eating the right-hand
|
|
@@ -2206,39 +2448,37 @@
|
|
|
2206
2448
|
default. Any component that needs a real floor (e.g. the data callout's 270px
|
|
2207
2449
|
donut slot) sets its own min-width via a plain class and always wins, instead
|
|
2208
2450
|
of racing this rule on source order. */
|
|
2209
|
-
:where(.seeds-narrative-container),
|
|
2210
|
-
:where(.seeds-narrative-container *) {
|
|
2211
|
-
|
|
2212
|
-
}
|
|
2451
|
+
:where(.seeds-narrative-container),
|
|
2452
|
+
:where(.seeds-narrative-container *) {
|
|
2453
|
+
min-width: 0;
|
|
2454
|
+
}
|
|
2213
2455
|
|
|
2214
|
-
/* Decorative inner gradient border anchored to the top-left corner.
|
|
2456
|
+
/* Decorative inner gradient border anchored to the top-left corner.
|
|
2215
2457
|
A masked ::before so the gradient renders as a uniform-width ring that follows
|
|
2216
2458
|
border-radius and never tints the content. The radial ellipse fades to
|
|
2217
2459
|
transparent away from the corner; its x-radius (80%) is larger than its
|
|
2218
2460
|
y-radius (60%) so the accent runs slightly further along the top edge than down
|
|
2219
2461
|
the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
|
|
2220
2462
|
--color-gradient-* token once one exists for a fade-to-transparent variant. */
|
|
2221
|
-
.seeds-narrative-container-accent::before {
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
}
|
|
2241
|
-
|
|
2463
|
+
.seeds-narrative-container-accent::before {
|
|
2464
|
+
content: "";
|
|
2465
|
+
position: absolute;
|
|
2466
|
+
inset: 0;
|
|
2467
|
+
border-radius: inherit;
|
|
2468
|
+
padding: 4px;
|
|
2469
|
+
background: radial-gradient(
|
|
2470
|
+
ellipse 80% 60% at top left,
|
|
2471
|
+
#205bc3 0%,
|
|
2472
|
+
#9747ff 28%,
|
|
2473
|
+
#f282f5 50%,
|
|
2474
|
+
transparent 72%
|
|
2475
|
+
);
|
|
2476
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
|
2477
|
+
linear-gradient(#fff 0 0);
|
|
2478
|
+
-webkit-mask-composite: xor;
|
|
2479
|
+
mask-composite: exclude;
|
|
2480
|
+
pointer-events: none;
|
|
2481
|
+
}
|
|
2242
2482
|
}
|
|
2243
2483
|
|
|
2244
2484
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2263,89 +2503,87 @@
|
|
|
2263
2503
|
*/
|
|
2264
2504
|
|
|
2265
2505
|
@layer components {
|
|
2266
|
-
|
|
2267
|
-
/* Establishes the query container. The row inside reacts to this element's
|
|
2506
|
+
/* Establishes the query container. The row inside reacts to this element's
|
|
2268
2507
|
inline size. A container query only styles DESCENDANTS of the query container,
|
|
2269
2508
|
so the flex row lives on the inner element, not this one. */
|
|
2270
|
-
.seeds-narrative-data-callout {
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
}
|
|
2509
|
+
.seeds-narrative-data-callout {
|
|
2510
|
+
container-type: inline-size;
|
|
2511
|
+
box-sizing: border-box;
|
|
2512
|
+
font-family: var(--font-family);
|
|
2513
|
+
}
|
|
2275
2514
|
|
|
2276
|
-
/* Stacked single column by default (narrow). The container query below turns it
|
|
2515
|
+
/* Stacked single column by default (narrow). The container query below turns it
|
|
2277
2516
|
into the horizontal 1/3 + 2/3 row once there is room. */
|
|
2278
|
-
.seeds-narrative-data-callout-row {
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
}
|
|
2517
|
+
.seeds-narrative-data-callout-row {
|
|
2518
|
+
box-sizing: border-box;
|
|
2519
|
+
display: flex;
|
|
2520
|
+
flex-direction: column;
|
|
2521
|
+
align-items: center;
|
|
2522
|
+
gap: var(--space-450); /* 24px */
|
|
2523
|
+
}
|
|
2285
2524
|
|
|
2286
|
-
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
2525
|
+
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
2287
2526
|
its own look and its own size. No fixed height: charts like the data-viz
|
|
2288
2527
|
DonutChart carry their own intrinsic height (and a legend), so the slot sizes
|
|
2289
2528
|
to the chart rather than clipping it. Stacked full-width until the container
|
|
2290
2529
|
query expands the row. */
|
|
2291
|
-
.seeds-narrative-data-callout-visual {
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
}
|
|
2530
|
+
.seeds-narrative-data-callout-visual {
|
|
2531
|
+
box-sizing: border-box;
|
|
2532
|
+
display: flex;
|
|
2533
|
+
align-items: center;
|
|
2534
|
+
justify-content: center;
|
|
2535
|
+
width: 100%;
|
|
2536
|
+
min-width: 0;
|
|
2537
|
+
}
|
|
2299
2538
|
|
|
2300
|
-
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
2539
|
+
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
2301
2540
|
the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
|
|
2302
2541
|
so Highcharts fills that shrunk width and the ring gets width-capped below its
|
|
2303
2542
|
fixed 270px height — leaving an empty vertical band. Filling the width lets the
|
|
2304
2543
|
ring become height-capped and fill its box top-to-bottom, like the standalone
|
|
2305
2544
|
chart story. */
|
|
2306
|
-
.seeds-narrative-data-callout-visual > * {
|
|
2307
|
-
|
|
2308
|
-
}
|
|
2545
|
+
.seeds-narrative-data-callout-visual > * {
|
|
2546
|
+
width: 100%;
|
|
2547
|
+
}
|
|
2309
2548
|
|
|
2310
|
-
/* Body copy — fills the remaining space. */
|
|
2311
|
-
.seeds-narrative-data-callout-body {
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
}
|
|
2549
|
+
/* Body copy — fills the remaining space. */
|
|
2550
|
+
.seeds-narrative-data-callout-body {
|
|
2551
|
+
box-sizing: border-box;
|
|
2552
|
+
min-width: 0;
|
|
2553
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2554
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
2555
|
+
font-weight: var(--font-weight-normal);
|
|
2556
|
+
color: var(--color-text-body);
|
|
2557
|
+
overflow-wrap: break-word;
|
|
2558
|
+
}
|
|
2320
2559
|
|
|
2321
|
-
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
2560
|
+
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
2322
2561
|
The threshold is on the component's own width (container query), so a narrow
|
|
2323
2562
|
callout on a wide screen still stacks. 480px keeps the donut + copy readable
|
|
2324
2563
|
side by side. */
|
|
2325
|
-
@container (min-width: 480px) {
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2564
|
+
@container (min-width: 480px) {
|
|
2565
|
+
.seeds-narrative-data-callout-row {
|
|
2566
|
+
flex-direction: row;
|
|
2567
|
+
}
|
|
2329
2568
|
|
|
2330
|
-
|
|
2331
|
-
|
|
2569
|
+
.seeds-narrative-data-callout-visual {
|
|
2570
|
+
/* Nominally one-third, but never narrower than the injected chart's fixed
|
|
2332
2571
|
height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
|
|
2333
2572
|
fixed-height chart like the donut gets width-capped and leaves an empty
|
|
2334
2573
|
vertical band above/below the ring; the min-width keeps the visual square
|
|
2335
2574
|
enough that the ring fills its box top-to-bottom, matching the standalone
|
|
2336
2575
|
chart story. */
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2576
|
+
flex: 0 0 33.333%;
|
|
2577
|
+
min-width: 270px;
|
|
2578
|
+
width: auto;
|
|
2579
|
+
}
|
|
2341
2580
|
|
|
2342
|
-
|
|
2343
|
-
|
|
2581
|
+
.seeds-narrative-data-callout-body {
|
|
2582
|
+
flex: 1 1 0;
|
|
2583
|
+
}
|
|
2344
2584
|
}
|
|
2345
2585
|
}
|
|
2346
2586
|
|
|
2347
|
-
}
|
|
2348
|
-
|
|
2349
2587
|
/* --- seeds-react-narrative-kit --- */
|
|
2350
2588
|
/**
|
|
2351
2589
|
* Seeds NarrativeDivider component classes.
|
|
@@ -2359,20 +2597,18 @@
|
|
|
2359
2597
|
*/
|
|
2360
2598
|
|
|
2361
2599
|
@layer components {
|
|
2362
|
-
|
|
2363
|
-
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
2600
|
+
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
2364
2601
|
and a beveled border, so reset those and draw the line with a single
|
|
2365
2602
|
border-top using the container-border-base token (#dee1e1), which also
|
|
2366
2603
|
tracks dark mode. */
|
|
2367
|
-
.seeds-narrative-divider {
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
}
|
|
2375
|
-
|
|
2604
|
+
.seeds-narrative-divider {
|
|
2605
|
+
box-sizing: border-box;
|
|
2606
|
+
width: 100%;
|
|
2607
|
+
height: 0;
|
|
2608
|
+
margin: 0;
|
|
2609
|
+
border: 0;
|
|
2610
|
+
border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
|
|
2611
|
+
}
|
|
2376
2612
|
}
|
|
2377
2613
|
|
|
2378
2614
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2392,121 +2628,120 @@
|
|
|
2392
2628
|
*/
|
|
2393
2629
|
|
|
2394
2630
|
@layer components {
|
|
2631
|
+
/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
|
|
2632
|
+
.seeds-narrative-headline {
|
|
2633
|
+
box-sizing: border-box;
|
|
2634
|
+
margin: 0;
|
|
2635
|
+
font-family: var(--font-family);
|
|
2636
|
+
font-size: var(--font-size-700);
|
|
2637
|
+
line-height: var(--line-height-700);
|
|
2638
|
+
font-weight: var(--font-weight-bold);
|
|
2639
|
+
letter-spacing: -0.02em;
|
|
2640
|
+
color: var(--color-text-headline);
|
|
2641
|
+
}
|
|
2395
2642
|
|
|
2396
|
-
/*
|
|
2397
|
-
.seeds-narrative-headline {
|
|
2398
|
-
box-sizing: border-box;
|
|
2399
|
-
margin: 0;
|
|
2400
|
-
font-family: var(--font-family);
|
|
2401
|
-
font-size: var(--font-size-700);
|
|
2402
|
-
line-height: var(--line-height-700);
|
|
2403
|
-
font-weight: var(--font-weight-bold);
|
|
2404
|
-
letter-spacing: -0.02em;
|
|
2405
|
-
color: var(--color-text-headline);
|
|
2406
|
-
}
|
|
2407
|
-
|
|
2408
|
-
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
2643
|
+
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
2409
2644
|
spacing, and color are inherited from the base class. */
|
|
2410
|
-
.seeds-narrative-headline-small {
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
}
|
|
2645
|
+
.seeds-narrative-headline-small {
|
|
2646
|
+
font-size: var(--font-size-600); /* 24px */
|
|
2647
|
+
line-height: var(--line-height-600); /* 32px */
|
|
2648
|
+
}
|
|
2414
2649
|
|
|
2415
|
-
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
2650
|
+
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
2416
2651
|
Paints the AI brand gradient onto the glyphs via background-clip. */
|
|
2417
|
-
.seeds-narrative-headline-highlight {
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
}
|
|
2652
|
+
.seeds-narrative-headline-highlight {
|
|
2653
|
+
background: var(--color-gradient-ai);
|
|
2654
|
+
-webkit-background-clip: text;
|
|
2655
|
+
background-clip: text;
|
|
2656
|
+
color: transparent;
|
|
2657
|
+
}
|
|
2423
2658
|
|
|
2424
|
-
/* -------------------------------------------------------------------------
|
|
2659
|
+
/* -------------------------------------------------------------------------
|
|
2425
2660
|
"Roll" variant — vertical word roll. The active word slides into view
|
|
2426
2661
|
while the previous one rolls out.
|
|
2427
2662
|
------------------------------------------------------------------------- */
|
|
2428
|
-
.seeds-narrative-headline-roll {
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2663
|
+
.seeds-narrative-headline-roll {
|
|
2664
|
+
display: inline-block;
|
|
2665
|
+
position: relative;
|
|
2666
|
+
/* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
|
|
2432
2667
|
snaps its baseline to the bottom margin edge, dropping the rolling word
|
|
2433
2668
|
below the surrounding text. clip-path keeps the natural baseline. */
|
|
2434
|
-
|
|
2435
|
-
}
|
|
2436
|
-
|
|
2437
|
-
/* Invisible word that holds the box width to the active word. */
|
|
2438
|
-
.seeds-narrative-headline-roll-sizer {
|
|
2439
|
-
display: inline-block;
|
|
2440
|
-
visibility: hidden;
|
|
2441
|
-
white-space: nowrap;
|
|
2442
|
-
pointer-events: none;
|
|
2443
|
-
}
|
|
2444
|
-
|
|
2445
|
-
.seeds-narrative-headline-roll-word {
|
|
2446
|
-
display: inline-block;
|
|
2447
|
-
position: absolute;
|
|
2448
|
-
top: 0;
|
|
2449
|
-
left: 0;
|
|
2450
|
-
white-space: nowrap;
|
|
2451
|
-
transform: translateY(100%);
|
|
2452
|
-
opacity: 0;
|
|
2453
|
-
transition:
|
|
2454
|
-
transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
2455
|
-
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
2456
|
-
}
|
|
2669
|
+
clip-path: inset(0);
|
|
2670
|
+
}
|
|
2457
2671
|
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2672
|
+
/* Invisible word that holds the box width to the active word. */
|
|
2673
|
+
.seeds-narrative-headline-roll-sizer {
|
|
2674
|
+
display: inline-block;
|
|
2675
|
+
visibility: hidden;
|
|
2676
|
+
white-space: nowrap;
|
|
2677
|
+
pointer-events: none;
|
|
2678
|
+
}
|
|
2462
2679
|
|
|
2463
|
-
.seeds-narrative-headline-roll-word
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2680
|
+
.seeds-narrative-headline-roll-word {
|
|
2681
|
+
display: inline-block;
|
|
2682
|
+
position: absolute;
|
|
2683
|
+
top: 0;
|
|
2684
|
+
left: 0;
|
|
2685
|
+
white-space: nowrap;
|
|
2686
|
+
transform: translateY(100%);
|
|
2687
|
+
opacity: 0;
|
|
2688
|
+
transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
2689
|
+
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
2690
|
+
}
|
|
2467
2691
|
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
}
|
|
2472
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
|
|
2473
|
-
transform: translateY(0);
|
|
2474
|
-
}
|
|
2475
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
2476
|
-
transform: translateY(100%);
|
|
2477
|
-
}
|
|
2692
|
+
.seeds-narrative-headline-roll-word-active {
|
|
2693
|
+
transform: translateY(0);
|
|
2694
|
+
opacity: 1;
|
|
2695
|
+
}
|
|
2478
2696
|
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
-webkit-background-clip: text;
|
|
2484
|
-
background-clip: text;
|
|
2485
|
-
color: transparent;
|
|
2486
|
-
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
2487
|
-
}
|
|
2697
|
+
.seeds-narrative-headline-roll-word-past {
|
|
2698
|
+
transform: translateY(-100%);
|
|
2699
|
+
opacity: 0;
|
|
2700
|
+
}
|
|
2488
2701
|
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
background-position: 0% 50%;
|
|
2702
|
+
/* Reverse the roll direction. */
|
|
2703
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
|
|
2704
|
+
transform: translateY(-100%);
|
|
2493
2705
|
}
|
|
2494
|
-
|
|
2495
|
-
|
|
2706
|
+
.seeds-narrative-headline-roll-down
|
|
2707
|
+
.seeds-narrative-headline-roll-word-active {
|
|
2708
|
+
transform: translateY(0);
|
|
2496
2709
|
}
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
2500
|
-
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
2501
|
-
@media (prefers-reduced-motion: reduce) {
|
|
2502
|
-
.seeds-narrative-headline-roll-word {
|
|
2503
|
-
transition: none;
|
|
2710
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
2711
|
+
transform: translateY(100%);
|
|
2504
2712
|
}
|
|
2713
|
+
|
|
2714
|
+
/* Gradient-painted rolling words with a slow shimmer. */
|
|
2505
2715
|
.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
|
|
2506
|
-
|
|
2716
|
+
background: var(--color-gradient-ai);
|
|
2717
|
+
background-size: 200% 200%;
|
|
2718
|
+
-webkit-background-clip: text;
|
|
2719
|
+
background-clip: text;
|
|
2720
|
+
color: transparent;
|
|
2721
|
+
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
2507
2722
|
}
|
|
2508
|
-
}
|
|
2509
2723
|
|
|
2724
|
+
@keyframes seeds-narrative-headline-grad-shift {
|
|
2725
|
+
0%,
|
|
2726
|
+
100% {
|
|
2727
|
+
background-position: 0% 50%;
|
|
2728
|
+
}
|
|
2729
|
+
50% {
|
|
2730
|
+
background-position: 100% 50%;
|
|
2731
|
+
}
|
|
2732
|
+
}
|
|
2733
|
+
|
|
2734
|
+
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
2735
|
+
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
2736
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2737
|
+
.seeds-narrative-headline-roll-word {
|
|
2738
|
+
transition: none;
|
|
2739
|
+
}
|
|
2740
|
+
.seeds-narrative-headline-roll-gradient
|
|
2741
|
+
.seeds-narrative-headline-roll-word {
|
|
2742
|
+
animation: none;
|
|
2743
|
+
}
|
|
2744
|
+
}
|
|
2510
2745
|
}
|
|
2511
2746
|
|
|
2512
2747
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2526,103 +2761,109 @@
|
|
|
2526
2761
|
*/
|
|
2527
2762
|
|
|
2528
2763
|
@layer components {
|
|
2529
|
-
|
|
2530
|
-
/* Establishes the query container. The track inside reacts to this element's
|
|
2764
|
+
/* Establishes the query container. The track inside reacts to this element's
|
|
2531
2765
|
inline size — a container query can only style descendants of the container,
|
|
2532
2766
|
never the container element itself. */
|
|
2533
|
-
.seeds-narrative-ordered-list {
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
}
|
|
2767
|
+
.seeds-narrative-ordered-list {
|
|
2768
|
+
container-type: inline-size;
|
|
2769
|
+
box-sizing: border-box;
|
|
2770
|
+
font-family: var(--font-family);
|
|
2771
|
+
}
|
|
2538
2772
|
|
|
2539
|
-
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
2773
|
+
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
2540
2774
|
only expands to a row once the container query below has room, so horizontal
|
|
2541
2775
|
collapses back to this stack when narrow. */
|
|
2542
|
-
.seeds-narrative-ordered-list-track {
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
}
|
|
2776
|
+
.seeds-narrative-ordered-list-track {
|
|
2777
|
+
display: flex;
|
|
2778
|
+
flex-direction: column;
|
|
2779
|
+
gap: var(--space-400); /* 16px */
|
|
2780
|
+
margin: 0;
|
|
2781
|
+
padding: 0;
|
|
2782
|
+
list-style: none;
|
|
2783
|
+
}
|
|
2550
2784
|
|
|
2551
|
-
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
2552
|
-
.seeds-narrative-ordered-list-item {
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
}
|
|
2785
|
+
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
2786
|
+
.seeds-narrative-ordered-list-item {
|
|
2787
|
+
display: flex;
|
|
2788
|
+
gap: var(--space-450); /* 24px */
|
|
2789
|
+
align-items: flex-start;
|
|
2790
|
+
box-sizing: border-box;
|
|
2791
|
+
min-width: 0;
|
|
2792
|
+
padding: var(--space-400) var(--space-450); /* 16px 24px */
|
|
2793
|
+
border-radius: var(--radius-800); /* 12px */
|
|
2794
|
+
background-color: var(--color-app-bg-base);
|
|
2795
|
+
}
|
|
2562
2796
|
|
|
2563
|
-
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
2797
|
+
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
2564
2798
|
monospace stack — mirrors the value treatment in metric-highlight.css. */
|
|
2565
|
-
.seeds-narrative-ordered-list-number {
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2799
|
+
.seeds-narrative-ordered-list-number {
|
|
2800
|
+
margin: 0;
|
|
2801
|
+
flex-shrink: 0;
|
|
2802
|
+
font-family: var(
|
|
2803
|
+
--font-family-mono,
|
|
2804
|
+
ui-monospace,
|
|
2805
|
+
"SF Mono",
|
|
2806
|
+
SFMono-Regular,
|
|
2807
|
+
Menlo,
|
|
2808
|
+
monospace
|
|
2809
|
+
);
|
|
2810
|
+
font-size: var(--font-size-700); /* 32px */
|
|
2811
|
+
line-height: var(--line-height-700); /* 40px */
|
|
2812
|
+
font-weight: var(--font-weight-bold);
|
|
2813
|
+
color: var(--color-text-headline);
|
|
2814
|
+
}
|
|
2574
2815
|
|
|
2575
|
-
/* Title + description + optional action, stacked. */
|
|
2576
|
-
.seeds-narrative-ordered-list-body {
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
}
|
|
2816
|
+
/* Title + description + optional action, stacked. */
|
|
2817
|
+
.seeds-narrative-ordered-list-body {
|
|
2818
|
+
flex: 1 1 auto;
|
|
2819
|
+
display: flex;
|
|
2820
|
+
flex-direction: column;
|
|
2821
|
+
gap: var(--space-200); /* 4px */
|
|
2822
|
+
min-width: 0;
|
|
2823
|
+
}
|
|
2583
2824
|
|
|
2584
|
-
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
2825
|
+
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
2585
2826
|
skips from 24px to 32px), so the design value is kept verbatim. Same
|
|
2586
2827
|
rationale as narrative-summary.css. */
|
|
2587
|
-
.seeds-narrative-ordered-list-title {
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
}
|
|
2828
|
+
.seeds-narrative-ordered-list-title {
|
|
2829
|
+
margin: 0;
|
|
2830
|
+
font-size: var(--font-size-300); /* 16px */
|
|
2831
|
+
line-height: 28px; /* off-scale, see comment above */
|
|
2832
|
+
font-weight: var(--font-weight-bold);
|
|
2833
|
+
color: var(--color-text-body);
|
|
2834
|
+
}
|
|
2594
2835
|
|
|
2595
|
-
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
2836
|
+
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
2596
2837
|
same rationale as the title above. */
|
|
2597
|
-
.seeds-narrative-ordered-list-description {
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
}
|
|
2838
|
+
.seeds-narrative-ordered-list-description {
|
|
2839
|
+
margin: 0;
|
|
2840
|
+
font-size: 14px; /* off-scale, see title above */
|
|
2841
|
+
line-height: 24px;
|
|
2842
|
+
font-weight: var(--font-weight-normal);
|
|
2843
|
+
color: var(--color-text-body);
|
|
2844
|
+
}
|
|
2604
2845
|
|
|
2605
|
-
.seeds-narrative-ordered-list-action {
|
|
2606
|
-
|
|
2607
|
-
}
|
|
2846
|
+
.seeds-narrative-ordered-list-action {
|
|
2847
|
+
padding-top: var(--space-350); /* 12px */
|
|
2848
|
+
}
|
|
2608
2849
|
|
|
2609
|
-
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
2850
|
+
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
2610
2851
|
wide enough. The threshold is on the component's own width (container query),
|
|
2611
2852
|
so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
|
|
2612
2853
|
breakpoint, matching narrative-summary.css. */
|
|
2613
|
-
@container (min-width: 640px) {
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2854
|
+
@container (min-width: 640px) {
|
|
2855
|
+
.seeds-narrative-ordered-list-horizontal {
|
|
2856
|
+
flex-direction: row;
|
|
2857
|
+
}
|
|
2617
2858
|
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2859
|
+
.seeds-narrative-ordered-list-horizontal
|
|
2860
|
+
> .seeds-narrative-ordered-list-item {
|
|
2861
|
+
flex: 1 1 0;
|
|
2862
|
+
min-width: 0;
|
|
2863
|
+
}
|
|
2621
2864
|
}
|
|
2622
2865
|
}
|
|
2623
2866
|
|
|
2624
|
-
}
|
|
2625
|
-
|
|
2626
2867
|
/* --- seeds-react-narrative-kit --- */
|
|
2627
2868
|
/**
|
|
2628
2869
|
* Seeds NarrativeSection component classes.
|
|
@@ -2639,36 +2880,34 @@
|
|
|
2639
2880
|
*/
|
|
2640
2881
|
|
|
2641
2882
|
@layer components {
|
|
2642
|
-
|
|
2643
|
-
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
2883
|
+
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
2644
2884
|
no surface of its own — it's meant to sit inside a NarrativeContainer. */
|
|
2645
|
-
.seeds-narrative-section {
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
}
|
|
2885
|
+
.seeds-narrative-section {
|
|
2886
|
+
display: flex;
|
|
2887
|
+
flex-direction: column;
|
|
2888
|
+
gap: var(--space-400); /* 16px — title to content */
|
|
2889
|
+
}
|
|
2650
2890
|
|
|
2651
|
-
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
2891
|
+
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
2652
2892
|
single-column grid (gap={500}) would give them, so multiple primitives inside
|
|
2653
2893
|
one section are spaced exactly as they are between sections. */
|
|
2654
|
-
.seeds-narrative-section-content {
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
}
|
|
2894
|
+
.seeds-narrative-section-content {
|
|
2895
|
+
display: flex;
|
|
2896
|
+
flex-direction: column;
|
|
2897
|
+
gap: var(--space-500); /* 32px — between widgets */
|
|
2898
|
+
}
|
|
2659
2899
|
|
|
2660
|
-
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
2900
|
+
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
2661
2901
|
which also tracks dark mode). Matches the summary-label recipe used across
|
|
2662
2902
|
the kit. The heading element ships with user-agent margins, so reset them. */
|
|
2663
|
-
.seeds-narrative-section-title {
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
}
|
|
2671
|
-
|
|
2903
|
+
.seeds-narrative-section-title {
|
|
2904
|
+
margin: 0;
|
|
2905
|
+
font-family: var(--font-family);
|
|
2906
|
+
font-size: 14px;
|
|
2907
|
+
line-height: 24px;
|
|
2908
|
+
font-weight: var(--font-weight-bold);
|
|
2909
|
+
color: var(--color-text-headline); /* #273333 */
|
|
2910
|
+
}
|
|
2672
2911
|
}
|
|
2673
2912
|
|
|
2674
2913
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2688,71 +2927,77 @@
|
|
|
2688
2927
|
*/
|
|
2689
2928
|
|
|
2690
2929
|
@layer components {
|
|
2691
|
-
|
|
2692
|
-
/* Main card container — gray background with rounded corners and padding.
|
|
2930
|
+
/* Main card container — gray background with rounded corners and padding.
|
|
2693
2931
|
Uses Seeds tokens for spacing, colors, and radius to match the design system.
|
|
2694
2932
|
Fills the width it is given (e.g. a grid column) and stretches its content to
|
|
2695
2933
|
match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
|
|
2696
2934
|
and resizes together instead of being pinned to a fixed 320px. */
|
|
2697
|
-
.seeds-narrative-social-media-card {
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
}
|
|
2709
|
-
|
|
2710
|
-
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
2711
|
-
.seeds-narrative-social-media-card--no-background {
|
|
2712
|
-
background-color: transparent;
|
|
2713
|
-
}
|
|
2714
|
-
|
|
2715
|
-
/* Main content area — standard body text styling. */
|
|
2716
|
-
.seeds-narrative-social-media-card-content {
|
|
2717
|
-
flex: 1;
|
|
2718
|
-
margin-top: var(--space-400); /* 16px */
|
|
2719
|
-
font-family: var(--font-family);
|
|
2720
|
-
font-size: 14px;
|
|
2721
|
-
font-style: normal;
|
|
2722
|
-
font-weight: 400;
|
|
2723
|
-
line-height: 24px;
|
|
2724
|
-
color: var(--color-text-body);
|
|
2725
|
-
}
|
|
2935
|
+
.seeds-narrative-social-media-card {
|
|
2936
|
+
box-sizing: border-box;
|
|
2937
|
+
display: flex;
|
|
2938
|
+
flex-direction: column;
|
|
2939
|
+
align-items: stretch;
|
|
2940
|
+
width: 100%;
|
|
2941
|
+
padding: var(--space-450); /* 24px */
|
|
2942
|
+
border-radius: var(--radius-500); /* 6px */
|
|
2943
|
+
background-color: var(--color-app-bg-base);
|
|
2944
|
+
font-family: var(--font-family);
|
|
2945
|
+
color: var(--color-text-body);
|
|
2946
|
+
}
|
|
2726
2947
|
|
|
2727
|
-
/*
|
|
2728
|
-
.seeds-narrative-social-media-card-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
gap: var(--space-400); /* 16px */
|
|
2732
|
-
margin-top: var(--space-400); /* 16px */;
|
|
2733
|
-
}
|
|
2948
|
+
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
2949
|
+
.seeds-narrative-social-media-card--no-background {
|
|
2950
|
+
background-color: transparent;
|
|
2951
|
+
}
|
|
2734
2952
|
|
|
2735
|
-
/*
|
|
2736
|
-
.seeds-narrative-social-media-card-
|
|
2737
|
-
|
|
2738
|
-
|
|
2953
|
+
/* Main content area — standard body text styling. */
|
|
2954
|
+
.seeds-narrative-social-media-card-content {
|
|
2955
|
+
flex: 1;
|
|
2956
|
+
margin-top: var(--space-400); /* 16px */
|
|
2957
|
+
font-family: var(--font-family);
|
|
2958
|
+
font-size: 14px;
|
|
2959
|
+
font-style: normal;
|
|
2960
|
+
font-weight: 400;
|
|
2961
|
+
line-height: 24px;
|
|
2962
|
+
color: var(--color-text-body);
|
|
2963
|
+
}
|
|
2739
2964
|
|
|
2740
|
-
/*
|
|
2741
|
-
.seeds-narrative-social-media-card-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2965
|
+
/* Footer section — horizontal layout for stats with equal spacing. */
|
|
2966
|
+
.seeds-narrative-social-media-card-footer {
|
|
2967
|
+
display: flex;
|
|
2968
|
+
align-items: center;
|
|
2969
|
+
gap: var(--space-400); /* 16px */
|
|
2970
|
+
margin-top: var(--space-400); /* 16px */
|
|
2971
|
+
}
|
|
2746
2972
|
|
|
2747
|
-
/*
|
|
2748
|
-
.seeds-narrative-social-media-card-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
font-weight: 400;
|
|
2752
|
-
line-height: 24px;
|
|
2753
|
-
color: var(--color-text-body);
|
|
2754
|
-
}
|
|
2973
|
+
/* Hide footer when empty (no metadata items). */
|
|
2974
|
+
.seeds-narrative-social-media-card-footer:empty {
|
|
2975
|
+
display: none;
|
|
2976
|
+
}
|
|
2755
2977
|
|
|
2978
|
+
/* Individual stat container — icon + value in horizontal layout. */
|
|
2979
|
+
.seeds-narrative-social-media-card-stat {
|
|
2980
|
+
display: flex;
|
|
2981
|
+
align-items: center;
|
|
2982
|
+
gap: var(--space-200); /* 4px */
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
/* Stat value text — monospace font for numeric values. */
|
|
2986
|
+
.seeds-narrative-social-media-card-stat-value {
|
|
2987
|
+
font-family: var(
|
|
2988
|
+
--font-family-mono,
|
|
2989
|
+
ui-monospace,
|
|
2990
|
+
"SF Mono",
|
|
2991
|
+
SFMono-Regular,
|
|
2992
|
+
Menlo,
|
|
2993
|
+
monospace
|
|
2994
|
+
);
|
|
2995
|
+
font-size: 14px;
|
|
2996
|
+
font-style: normal;
|
|
2997
|
+
font-weight: 400;
|
|
2998
|
+
line-height: 24px;
|
|
2999
|
+
color: var(--color-text-body);
|
|
3000
|
+
}
|
|
2756
3001
|
}
|
|
2757
3002
|
|
|
2758
3003
|
/* --- seeds-react-narrative-kit --- */
|
|
@@ -2774,115 +3019,113 @@
|
|
|
2774
3019
|
*/
|
|
2775
3020
|
|
|
2776
3021
|
@layer components {
|
|
2777
|
-
|
|
2778
|
-
/* Establishes the query container. The grid inside reacts to this element's
|
|
3022
|
+
/* Establishes the query container. The grid inside reacts to this element's
|
|
2779
3023
|
inline size. */
|
|
2780
|
-
.seeds-narrative-summary {
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
}
|
|
3024
|
+
.seeds-narrative-summary {
|
|
3025
|
+
container-type: inline-size;
|
|
3026
|
+
box-sizing: border-box;
|
|
3027
|
+
font-family: var(--font-family);
|
|
3028
|
+
}
|
|
2785
3029
|
|
|
2786
|
-
/* Stacked single column by default (narrow). The container query below expands
|
|
3030
|
+
/* Stacked single column by default (narrow). The container query below expands
|
|
2787
3031
|
it once there is room. */
|
|
2788
|
-
.seeds-narrative-summary-grid {
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
}
|
|
3032
|
+
.seeds-narrative-summary-grid {
|
|
3033
|
+
display: grid;
|
|
3034
|
+
grid-template-columns: 1fr;
|
|
3035
|
+
gap: var(--space-450); /* 24px */
|
|
3036
|
+
}
|
|
2793
3037
|
|
|
2794
|
-
/* The lead column: eyebrow, headline, optional action. align-items:flex-start
|
|
3038
|
+
/* The lead column: eyebrow, headline, optional action. align-items:flex-start
|
|
2795
3039
|
keeps the eyebrow pill and the action sized to their content — without it the
|
|
2796
3040
|
column's default stretch would blow the eyebrow out to full width. The
|
|
2797
3041
|
headline still fills and wraps because its text is wider than the track. */
|
|
2798
|
-
.seeds-narrative-summary-lead {
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
}
|
|
3042
|
+
.seeds-narrative-summary-lead {
|
|
3043
|
+
display: flex;
|
|
3044
|
+
flex-direction: column;
|
|
3045
|
+
align-items: flex-start;
|
|
3046
|
+
gap: var(--space-300); /* 8px */
|
|
3047
|
+
min-width: 0;
|
|
3048
|
+
}
|
|
2805
3049
|
|
|
2806
|
-
/* The headline area grows so the action anchors toward the bottom of the lead
|
|
3050
|
+
/* The headline area grows so the action anchors toward the bottom of the lead
|
|
2807
3051
|
column when the neighboring columns are taller. align-self:stretch fills the
|
|
2808
3052
|
track width (the lead column pins other items to flex-start) so the headline
|
|
2809
3053
|
wraps at the column edge regardless of its length. */
|
|
2810
|
-
.seeds-narrative-summary-headline {
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
}
|
|
3054
|
+
.seeds-narrative-summary-headline {
|
|
3055
|
+
flex: 1 1 auto;
|
|
3056
|
+
align-self: stretch;
|
|
3057
|
+
}
|
|
2814
3058
|
|
|
2815
|
-
/* In three-column mode the content wrapper is transparent to the grid, so its
|
|
3059
|
+
/* In three-column mode the content wrapper is transparent to the grid, so its
|
|
2816
3060
|
two sections become grid items in their own columns. In two-column mode the
|
|
2817
3061
|
container query below turns it into a real, stacking grid item. */
|
|
2818
|
-
.seeds-narrative-summary-content {
|
|
2819
|
-
|
|
2820
|
-
}
|
|
3062
|
+
.seeds-narrative-summary-content {
|
|
3063
|
+
display: contents;
|
|
3064
|
+
}
|
|
2821
3065
|
|
|
2822
|
-
.seeds-narrative-summary-section {
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
}
|
|
3066
|
+
.seeds-narrative-summary-section {
|
|
3067
|
+
display: flex;
|
|
3068
|
+
flex-direction: column;
|
|
3069
|
+
gap: var(--space-300); /* 8px */
|
|
3070
|
+
min-width: 0;
|
|
3071
|
+
}
|
|
2828
3072
|
|
|
2829
|
-
/* Section label. 14px / 24px has no exact type token (the scale skips from
|
|
3073
|
+
/* Section label. 14px / 24px has no exact type token (the scale skips from
|
|
2830
3074
|
13px to 16px), so the design value is kept verbatim — same rationale as
|
|
2831
3075
|
eyebrow-token.css. All other values use tokens. */
|
|
2832
|
-
.seeds-narrative-summary-label {
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
}
|
|
3076
|
+
.seeds-narrative-summary-label {
|
|
3077
|
+
margin: 0;
|
|
3078
|
+
font-size: 14px;
|
|
3079
|
+
line-height: 24px;
|
|
3080
|
+
font-weight: var(--font-weight-bold);
|
|
3081
|
+
color: var(--color-text-headline);
|
|
3082
|
+
}
|
|
2839
3083
|
|
|
2840
|
-
.seeds-narrative-summary-text {
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
}
|
|
3084
|
+
.seeds-narrative-summary-text {
|
|
3085
|
+
margin: 0;
|
|
3086
|
+
font-size: 14px; /* off-scale, see label above */
|
|
3087
|
+
line-height: 24px;
|
|
3088
|
+
font-weight: var(--font-weight-normal);
|
|
3089
|
+
color: var(--color-text-body);
|
|
3090
|
+
}
|
|
2847
3091
|
|
|
2848
|
-
.seeds-narrative-summary-list {
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
}
|
|
3092
|
+
.seeds-narrative-summary-list {
|
|
3093
|
+
margin: 0;
|
|
3094
|
+
padding-inline-start: 21px;
|
|
3095
|
+
list-style: disc;
|
|
3096
|
+
font-size: 14px; /* off-scale, see label above */
|
|
3097
|
+
line-height: 24px;
|
|
3098
|
+
font-weight: var(--font-weight-normal);
|
|
3099
|
+
color: var(--color-text-body);
|
|
3100
|
+
}
|
|
2857
3101
|
|
|
2858
|
-
.seeds-narrative-summary-list li {
|
|
2859
|
-
|
|
2860
|
-
}
|
|
3102
|
+
.seeds-narrative-summary-list li {
|
|
3103
|
+
margin: 0;
|
|
3104
|
+
}
|
|
2861
3105
|
|
|
2862
|
-
/* Expand to the multi-column layout once the component is wide enough. The
|
|
3106
|
+
/* Expand to the multi-column layout once the component is wide enough. The
|
|
2863
3107
|
threshold is on the component's own width (container query), so a narrow card
|
|
2864
3108
|
on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
|
|
2865
|
-
@container (min-width: 640px) {
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
3109
|
+
@container (min-width: 640px) {
|
|
3110
|
+
.seeds-narrative-summary-grid {
|
|
3111
|
+
grid-template-columns: repeat(3, 1fr);
|
|
3112
|
+
}
|
|
2869
3113
|
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
3114
|
+
/* 1/3 lead + 2/3 content. */
|
|
3115
|
+
.seeds-narrative-summary-two-column {
|
|
3116
|
+
grid-template-columns: 1fr 2fr;
|
|
3117
|
+
}
|
|
2874
3118
|
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
3119
|
+
/* The content wrapper becomes a real grid item that stacks its two sections. */
|
|
3120
|
+
.seeds-narrative-summary-two-column .seeds-narrative-summary-content {
|
|
3121
|
+
display: flex;
|
|
3122
|
+
flex-direction: column;
|
|
3123
|
+
gap: var(--space-450); /* 24px */
|
|
3124
|
+
min-width: 0;
|
|
3125
|
+
}
|
|
2881
3126
|
}
|
|
2882
3127
|
}
|
|
2883
3128
|
|
|
2884
|
-
}
|
|
2885
|
-
|
|
2886
3129
|
/* --- seeds-react-narrative-kit --- */
|
|
2887
3130
|
/**
|
|
2888
3131
|
* Seeds PullQuote component classes.
|
|
@@ -2897,60 +3140,58 @@
|
|
|
2897
3140
|
*/
|
|
2898
3141
|
|
|
2899
3142
|
@layer components {
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
/* 40px block / 48px inline — 48px is off the space scale, so derive it from
|
|
3143
|
+
.seeds-pull-quote {
|
|
3144
|
+
width: 100%;
|
|
3145
|
+
display: flex;
|
|
3146
|
+
flex-direction: column;
|
|
3147
|
+
align-items: flex-start;
|
|
3148
|
+
margin: 0; /* reset the browser default <figure> margin */
|
|
3149
|
+
/* 40px block / 48px inline — 48px is off the space scale, so derive it from
|
|
2908
3150
|
two tokens (40 + 8) rather than hardcoding an off-scale value. */
|
|
2909
|
-
|
|
2910
|
-
}
|
|
3151
|
+
padding: var(--space-600) calc(var(--space-600) + var(--space-300));
|
|
3152
|
+
}
|
|
2911
3153
|
|
|
2912
|
-
/* The accented bar holding the quote and attribution. */
|
|
2913
|
-
.seeds-pull-quote-bar {
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
3154
|
+
/* The accented bar holding the quote and attribution. */
|
|
3155
|
+
.seeds-pull-quote-bar {
|
|
3156
|
+
box-sizing: border-box;
|
|
3157
|
+
display: flex;
|
|
3158
|
+
flex-direction: column;
|
|
3159
|
+
align-items: flex-start;
|
|
3160
|
+
gap: var(--space-450); /* 24px */
|
|
3161
|
+
width: 100%;
|
|
3162
|
+
padding-left: var(--space-450); /* 24px */
|
|
3163
|
+
/* 4px is off the border-width scale (max token is 3px); the bar is a
|
|
2922
3164
|
decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
|
|
2923
3165
|
subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
|
|
2924
|
-
|
|
2925
|
-
}
|
|
3166
|
+
border-left: 4px solid #9747ff;
|
|
3167
|
+
}
|
|
2926
3168
|
|
|
2927
|
-
.seeds-pull-quote-vivid .seeds-pull-quote-bar {
|
|
2928
|
-
|
|
2929
|
-
}
|
|
3169
|
+
.seeds-pull-quote-vivid .seeds-pull-quote-bar {
|
|
3170
|
+
border-left-color: #fff;
|
|
3171
|
+
}
|
|
2930
3172
|
|
|
2931
|
-
.seeds-pull-quote-text {
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
}
|
|
3173
|
+
.seeds-pull-quote-text {
|
|
3174
|
+
margin: 0; /* reset the browser default <blockquote> margin */
|
|
3175
|
+
font-size: var(--font-size-600);
|
|
3176
|
+
line-height: var(--line-height-600);
|
|
3177
|
+
font-style: italic;
|
|
3178
|
+
font-weight: var(--font-weight-normal);
|
|
3179
|
+
color: inherit;
|
|
3180
|
+
overflow-wrap: break-word;
|
|
3181
|
+
}
|
|
2940
3182
|
|
|
2941
|
-
/* Attribution row — a flex container for author name, avatar, network, etc.
|
|
3183
|
+
/* Attribution row — a flex container for author name, avatar, network, etc.
|
|
2942
3184
|
Direct text inherits a bold, small treatment to match the display-name style;
|
|
2943
3185
|
richer content (e.g. an Avatar) composes freely. */
|
|
2944
|
-
.seeds-pull-quote-attribution {
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
}
|
|
2953
|
-
|
|
3186
|
+
.seeds-pull-quote-attribution {
|
|
3187
|
+
display: flex;
|
|
3188
|
+
align-items: center;
|
|
3189
|
+
gap: var(--space-300); /* 8px */
|
|
3190
|
+
font-size: var(--font-size-200);
|
|
3191
|
+
line-height: var(--line-height-200);
|
|
3192
|
+
font-weight: var(--font-weight-bold);
|
|
3193
|
+
color: inherit;
|
|
3194
|
+
}
|
|
2954
3195
|
}
|
|
2955
3196
|
|
|
2956
3197
|
/* --- seeds-react-numeral --- */
|
|
@@ -3077,6 +3318,100 @@
|
|
|
3077
3318
|
}
|
|
3078
3319
|
}
|
|
3079
3320
|
|
|
3321
|
+
/* --- seeds-react-panel --- */
|
|
3322
|
+
/**
|
|
3323
|
+
* Seeds Panel component classes.
|
|
3324
|
+
* Component-scoped port of the static styled-components chrome in styles.ts.
|
|
3325
|
+
* Used by PanelTailwind.tsx and the Tailwind sub-component paths.
|
|
3326
|
+
*
|
|
3327
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
|
|
3328
|
+
* CSS variable definitions (and dark mode support).
|
|
3329
|
+
*
|
|
3330
|
+
* Runtime geometry (flex-basis, the gap margin, the direction shape, and the
|
|
3331
|
+
* inner min-width/min-height) is applied as inline style on the elements, not
|
|
3332
|
+
* here — the jsdom tests assert those computed values and CSS is not loaded in
|
|
3333
|
+
* that environment. Only static chrome lives in these classes.
|
|
3334
|
+
*
|
|
3335
|
+
* All rules live in `@layer components` so consumer Tailwind utilities (e.g.
|
|
3336
|
+
* mx-200, p-300, inline-flex) win the cascade and can override these component
|
|
3337
|
+
* defaults, rather than tying/beating them on specificity. Unlayered rules
|
|
3338
|
+
* would outrank any layered utility per the CSS cascade-layers spec.
|
|
3339
|
+
*/
|
|
3340
|
+
|
|
3341
|
+
@layer components {
|
|
3342
|
+
/* Container --------------------------------------------------------------- */
|
|
3343
|
+
|
|
3344
|
+
.seeds-panel {
|
|
3345
|
+
background: var(--color-container-bg-base);
|
|
3346
|
+
flex-grow: 0;
|
|
3347
|
+
flex-shrink: 0;
|
|
3348
|
+
overflow: hidden;
|
|
3349
|
+
border-radius: var(--radius-800);
|
|
3350
|
+
transition: flex-basis var(--duration-medium) ease-in-out,
|
|
3351
|
+
margin var(--duration-medium) ease-in-out;
|
|
3352
|
+
}
|
|
3353
|
+
|
|
3354
|
+
.seeds-panel-inner {
|
|
3355
|
+
display: flex;
|
|
3356
|
+
flex-direction: column;
|
|
3357
|
+
overflow: hidden;
|
|
3358
|
+
}
|
|
3359
|
+
|
|
3360
|
+
/* Header ------------------------------------------------------------------ */
|
|
3361
|
+
|
|
3362
|
+
.seeds-panel-header {
|
|
3363
|
+
display: flex;
|
|
3364
|
+
flex: 0 0 auto;
|
|
3365
|
+
justify-content: space-between;
|
|
3366
|
+
align-items: center;
|
|
3367
|
+
padding: var(--space-400);
|
|
3368
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
3369
|
+
}
|
|
3370
|
+
|
|
3371
|
+
/* Content ----------------------------------------------------------------- */
|
|
3372
|
+
|
|
3373
|
+
/* overflow-y (and, when headerless, display/flex-direction) are set inline
|
|
3374
|
+
by PanelContentTailwind because the tests assert them under jsdom. */
|
|
3375
|
+
.seeds-panel-content {
|
|
3376
|
+
flex: 1 1 auto;
|
|
3377
|
+
min-height: 0;
|
|
3378
|
+
padding: var(--space-450);
|
|
3379
|
+
color: var(--color-text-body);
|
|
3380
|
+
}
|
|
3381
|
+
|
|
3382
|
+
/* Headerless content renders flush; the children own all chrome/padding. */
|
|
3383
|
+
.seeds-panel-content--headerless {
|
|
3384
|
+
padding: 0;
|
|
3385
|
+
}
|
|
3386
|
+
|
|
3387
|
+
/* Footer ------------------------------------------------------------------ */
|
|
3388
|
+
|
|
3389
|
+
/* margin-bottom (var(--bleed, 0px)) is set inline by PanelFooterTailwind. */
|
|
3390
|
+
.seeds-panel-footer {
|
|
3391
|
+
flex: 0 0 auto;
|
|
3392
|
+
overflow: hidden;
|
|
3393
|
+
padding: var(--space-450);
|
|
3394
|
+
}
|
|
3395
|
+
|
|
3396
|
+
/* Mobile actions header --------------------------------------------------- */
|
|
3397
|
+
|
|
3398
|
+
.seeds-panel-mobile-actions-header {
|
|
3399
|
+
display: flex;
|
|
3400
|
+
flex: 0 0 auto;
|
|
3401
|
+
align-items: center;
|
|
3402
|
+
justify-content: space-between;
|
|
3403
|
+
padding-top: var(--space-400);
|
|
3404
|
+
padding-left: var(--space-450);
|
|
3405
|
+
padding-right: var(--space-450);
|
|
3406
|
+
}
|
|
3407
|
+
|
|
3408
|
+
.seeds-panel-mobile-actions-buttons {
|
|
3409
|
+
display: flex;
|
|
3410
|
+
align-items: center;
|
|
3411
|
+
gap: var(--space-200);
|
|
3412
|
+
}
|
|
3413
|
+
}
|
|
3414
|
+
|
|
3080
3415
|
/* --- seeds-react-partner-logo --- */
|
|
3081
3416
|
/**
|
|
3082
3417
|
* Seeds Partner Logo component classes
|
|
@@ -3113,6 +3448,62 @@
|
|
|
3113
3448
|
}
|
|
3114
3449
|
}
|
|
3115
3450
|
|
|
3451
|
+
/* --- seeds-react-peek-in --- */
|
|
3452
|
+
/**
|
|
3453
|
+
* Seeds PeekIn component classes
|
|
3454
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
3455
|
+
*
|
|
3456
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
3457
|
+
* CSS variable definitions and dark mode support.
|
|
3458
|
+
*
|
|
3459
|
+
* These classes back only the root layout wrappers PeekIn authors directly
|
|
3460
|
+
* (the mobile bottom-sheet header row and the desktop main column). The rest
|
|
3461
|
+
* of PeekIn's appearance comes from the composed Seeds primitives (Modal,
|
|
3462
|
+
* Drawer, Panel, Text, Button), which own their own styling.
|
|
3463
|
+
*
|
|
3464
|
+
* Rules are wrapped in @layer components so consumer Tailwind utilities (which
|
|
3465
|
+
* live in @layer utilities) win the cascade. Without this layer the unlayered
|
|
3466
|
+
* component CSS would beat utilities like px-450 / gap-300 and they could not
|
|
3467
|
+
* override component styling. Keep every rule inside this single block.
|
|
3468
|
+
*/
|
|
3469
|
+
|
|
3470
|
+
@layer components {
|
|
3471
|
+
/* Mobile bottom-sheet header row (Drawer.Header render wrapper) */
|
|
3472
|
+
.seeds-peek-in-drawer-header {
|
|
3473
|
+
display: flex;
|
|
3474
|
+
align-items: center;
|
|
3475
|
+
justify-content: space-between;
|
|
3476
|
+
padding-top: var(--space-400);
|
|
3477
|
+
padding-right: var(--space-450);
|
|
3478
|
+
padding-left: var(--space-450);
|
|
3479
|
+
flex: 0 0 auto;
|
|
3480
|
+
}
|
|
3481
|
+
|
|
3482
|
+
/* Header left group: optional back button + title */
|
|
3483
|
+
.seeds-peek-in-titlegroup {
|
|
3484
|
+
display: flex;
|
|
3485
|
+
align-items: center;
|
|
3486
|
+
gap: var(--space-300);
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
/* Header right group: consumer actions + inline pills/close */
|
|
3490
|
+
.seeds-peek-in-header-actions {
|
|
3491
|
+
display: flex;
|
|
3492
|
+
align-items: center;
|
|
3493
|
+
gap: var(--space-200);
|
|
3494
|
+
}
|
|
3495
|
+
|
|
3496
|
+
/* Desktop main column: header + content, alongside the optional panel */
|
|
3497
|
+
.seeds-peek-in-main {
|
|
3498
|
+
display: flex;
|
|
3499
|
+
flex-direction: column;
|
|
3500
|
+
flex: 1 1 auto;
|
|
3501
|
+
overflow: hidden;
|
|
3502
|
+
background: var(--color-container-bg-base);
|
|
3503
|
+
border-radius: var(--radius-800);
|
|
3504
|
+
}
|
|
3505
|
+
}
|
|
3506
|
+
|
|
3116
3507
|
/* --- seeds-react-profile --- */
|
|
3117
3508
|
/**
|
|
3118
3509
|
* Seeds InlineProfile component classes
|
|
@@ -3263,6 +3654,7 @@
|
|
|
3263
3654
|
gap: var(--space-300);
|
|
3264
3655
|
}
|
|
3265
3656
|
}
|
|
3657
|
+
|
|
3266
3658
|
/* --- seeds-react-profile --- */
|
|
3267
3659
|
/**
|
|
3268
3660
|
* Seeds ProfileToken component classes
|
|
@@ -3369,17 +3761,16 @@
|
|
|
3369
3761
|
border: 1px solid var(--color-form-border-base);
|
|
3370
3762
|
border-radius: 50%;
|
|
3371
3763
|
background-color: var(--color-form-bg-base);
|
|
3372
|
-
transition:
|
|
3373
|
-
border-color var(--duration-fast) ease-in,
|
|
3764
|
+
transition: border-color var(--duration-fast) ease-in,
|
|
3374
3765
|
background-color var(--duration-fast) ease-in;
|
|
3375
3766
|
}
|
|
3376
3767
|
|
|
3377
3768
|
/* Focus ring mirrors button.css (the CSS form of the focusRing mixin) */
|
|
3378
3769
|
.seeds-radio-input:focus {
|
|
3379
3770
|
outline: none;
|
|
3380
|
-
box-shadow:
|
|
3381
|
-
0 0 0
|
|
3382
|
-
|
|
3771
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
3772
|
+
0 0 0 4px
|
|
3773
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
3383
3774
|
}
|
|
3384
3775
|
|
|
3385
3776
|
.seeds-radio-wrapper:before {
|
|
@@ -3399,7 +3790,8 @@
|
|
|
3399
3790
|
|
|
3400
3791
|
/* Unchecked hover / focus: show the dot (only when NOT checked) */
|
|
3401
3792
|
.seeds-radio-wrapper:not(.seeds-radio-checked):hover .seeds-radio-input,
|
|
3402
|
-
.seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
|
|
3793
|
+
.seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
|
|
3794
|
+
.seeds-radio-input {
|
|
3403
3795
|
border-color: var(--color-form-border-base);
|
|
3404
3796
|
background-color: var(--color-form-bg-base);
|
|
3405
3797
|
}
|
|
@@ -3411,7 +3803,9 @@
|
|
|
3411
3803
|
}
|
|
3412
3804
|
|
|
3413
3805
|
/* Disabled-unchecked keeps the hover dot hidden (parity with opacity: disabled ? 0 : 1) */
|
|
3414
|
-
.seeds-radio-wrapper.seeds-radio-disabled:not(
|
|
3806
|
+
.seeds-radio-wrapper.seeds-radio-disabled:not(
|
|
3807
|
+
.seeds-radio-checked
|
|
3808
|
+
):hover:before {
|
|
3415
3809
|
opacity: 0;
|
|
3416
3810
|
}
|
|
3417
3811
|
|
|
@@ -3563,8 +3957,7 @@
|
|
|
3563
3957
|
cursor: pointer;
|
|
3564
3958
|
outline: none;
|
|
3565
3959
|
appearance: none;
|
|
3566
|
-
transition:
|
|
3567
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
3960
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
3568
3961
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
3569
3962
|
font-family: var(--font-family);
|
|
3570
3963
|
font-weight: var(--font-weight-normal);
|
|
@@ -3579,16 +3972,14 @@
|
|
|
3579
3972
|
}
|
|
3580
3973
|
|
|
3581
3974
|
.seeds-select .seeds-select-input:focus {
|
|
3582
|
-
box-shadow:
|
|
3583
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
3975
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
3584
3976
|
0 0px 0px 4px
|
|
3585
3977
|
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
3586
3978
|
outline: none;
|
|
3587
3979
|
}
|
|
3588
3980
|
|
|
3589
3981
|
/* Fix for red ring when input is marked required in Firefox */
|
|
3590
|
-
.seeds-select
|
|
3591
|
-
.seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
|
|
3982
|
+
.seeds-select .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
|
|
3592
3983
|
box-shadow: none;
|
|
3593
3984
|
}
|
|
3594
3985
|
|
|
@@ -3954,9 +4345,9 @@
|
|
|
3954
4345
|
/* Mixin for styled focus ring — copied from button.css:34-39 */
|
|
3955
4346
|
.seeds-switch:focus {
|
|
3956
4347
|
outline: none;
|
|
3957
|
-
box-shadow:
|
|
3958
|
-
0 0 0
|
|
3959
|
-
|
|
4348
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4349
|
+
0 0 0 4px
|
|
4350
|
+
color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
|
|
3960
4351
|
}
|
|
3961
4352
|
|
|
3962
4353
|
/* Base styles for circle element */
|
|
@@ -4058,6 +4449,95 @@
|
|
|
4058
4449
|
}
|
|
4059
4450
|
}
|
|
4060
4451
|
|
|
4452
|
+
/* --- seeds-react-table --- */
|
|
4453
|
+
/**
|
|
4454
|
+
* Seeds v2 Table component classes
|
|
4455
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
4456
|
+
*
|
|
4457
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
4458
|
+
* CSS variable definitions and dark mode support.
|
|
4459
|
+
*
|
|
4460
|
+
* Usage:
|
|
4461
|
+
* <div class="seeds-table-v2-container" role="region" tabindex="0">
|
|
4462
|
+
* <table class="seeds-table-v2">
|
|
4463
|
+
* <caption class="seeds-table-v2-caption">Caption</caption>
|
|
4464
|
+
* <thead class="seeds-table-v2-header">
|
|
4465
|
+
* <tr class="seeds-table-v2-row">
|
|
4466
|
+
* <th class="seeds-table-v2-header-cell" scope="col">Header</th>
|
|
4467
|
+
* </tr>
|
|
4468
|
+
* </thead>
|
|
4469
|
+
* <tbody class="seeds-table-v2-body">
|
|
4470
|
+
* <tr class="seeds-table-v2-row">
|
|
4471
|
+
* <td class="seeds-table-v2-cell">Data</td>
|
|
4472
|
+
* </tr>
|
|
4473
|
+
* </tbody>
|
|
4474
|
+
* </table>
|
|
4475
|
+
* </div>
|
|
4476
|
+
*
|
|
4477
|
+
* All rules are wrapped in `@layer components` so that consumer Tailwind
|
|
4478
|
+
* utilities (unlayered) win the cascade over these styles.
|
|
4479
|
+
*/
|
|
4480
|
+
|
|
4481
|
+
@layer components {
|
|
4482
|
+
.seeds-table-v2-container {
|
|
4483
|
+
overflow-x: auto;
|
|
4484
|
+
max-width: 100%;
|
|
4485
|
+
}
|
|
4486
|
+
|
|
4487
|
+
.seeds-table-v2 {
|
|
4488
|
+
width: 100%;
|
|
4489
|
+
border-collapse: collapse;
|
|
4490
|
+
color: var(--color-text-body);
|
|
4491
|
+
font-family: var(--font-family);
|
|
4492
|
+
}
|
|
4493
|
+
|
|
4494
|
+
.seeds-table-v2-caption {
|
|
4495
|
+
text-align: left;
|
|
4496
|
+
font-size: var(--font-size-400);
|
|
4497
|
+
line-height: var(--line-height-400);
|
|
4498
|
+
font-weight: var(--font-weight-semibold);
|
|
4499
|
+
padding: var(--space-300);
|
|
4500
|
+
margin-top: var(--space-200);
|
|
4501
|
+
}
|
|
4502
|
+
|
|
4503
|
+
.seeds-table-v2-caption-hidden {
|
|
4504
|
+
position: absolute;
|
|
4505
|
+
width: 1px;
|
|
4506
|
+
height: 1px;
|
|
4507
|
+
padding: 0;
|
|
4508
|
+
margin: -1px;
|
|
4509
|
+
overflow: hidden;
|
|
4510
|
+
clip: rect(0, 0, 0, 0);
|
|
4511
|
+
border: 0;
|
|
4512
|
+
}
|
|
4513
|
+
|
|
4514
|
+
.seeds-table-v2-header {
|
|
4515
|
+
vertical-align: bottom;
|
|
4516
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
4517
|
+
}
|
|
4518
|
+
|
|
4519
|
+
.seeds-table-v2-row {
|
|
4520
|
+
border-bottom: 1px solid var(--color-container-border-base);
|
|
4521
|
+
}
|
|
4522
|
+
|
|
4523
|
+
.seeds-table-v2-header-cell {
|
|
4524
|
+
font-size: var(--font-size-100);
|
|
4525
|
+
line-height: var(--line-height-100);
|
|
4526
|
+
font-weight: var(--font-weight-semibold);
|
|
4527
|
+
padding: var(--space-300);
|
|
4528
|
+
text-align: left;
|
|
4529
|
+
min-width: 0;
|
|
4530
|
+
}
|
|
4531
|
+
|
|
4532
|
+
.seeds-table-v2-cell {
|
|
4533
|
+
font-size: var(--font-size-200);
|
|
4534
|
+
line-height: var(--line-height-200);
|
|
4535
|
+
font-weight: var(--font-weight-normal);
|
|
4536
|
+
padding: var(--space-300);
|
|
4537
|
+
text-align: left;
|
|
4538
|
+
}
|
|
4539
|
+
}
|
|
4540
|
+
|
|
4061
4541
|
/* --- seeds-react-tabs --- */
|
|
4062
4542
|
/**
|
|
4063
4543
|
* Seeds Tabs component classes
|
|
@@ -4267,6 +4747,7 @@
|
|
|
4267
4747
|
line-height: var(--line-height-200);
|
|
4268
4748
|
}
|
|
4269
4749
|
}
|
|
4750
|
+
|
|
4270
4751
|
/* --- seeds-react-textarea --- */
|
|
4271
4752
|
/**
|
|
4272
4753
|
* Seeds Textarea component classes
|
|
@@ -4312,9 +4793,9 @@
|
|
|
4312
4793
|
}
|
|
4313
4794
|
|
|
4314
4795
|
.seeds-textarea-input:focus {
|
|
4315
|
-
box-shadow:
|
|
4316
|
-
0 0 0
|
|
4317
|
-
|
|
4796
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4797
|
+
0 0 0 4px
|
|
4798
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4318
4799
|
outline: none;
|
|
4319
4800
|
}
|
|
4320
4801
|
|
|
@@ -4391,8 +4872,7 @@
|
|
|
4391
4872
|
}
|
|
4392
4873
|
|
|
4393
4874
|
.seeds-token:focus {
|
|
4394
|
-
box-shadow:
|
|
4395
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
4875
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4396
4876
|
0 0px 0px 4px
|
|
4397
4877
|
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4398
4878
|
outline: none;
|
|
@@ -4425,7 +4905,11 @@
|
|
|
4425
4905
|
cursor: pointer;
|
|
4426
4906
|
box-shadow: var(--shadow-low);
|
|
4427
4907
|
border: 1px solid
|
|
4428
|
-
color-mix(
|
|
4908
|
+
color-mix(
|
|
4909
|
+
in srgb,
|
|
4910
|
+
var(--color-container-border-decorative-blue),
|
|
4911
|
+
black 20%
|
|
4912
|
+
);
|
|
4429
4913
|
}
|
|
4430
4914
|
|
|
4431
4915
|
/* disabled */
|
|
@@ -4496,7 +4980,11 @@
|
|
|
4496
4980
|
.lights-out .seeds-token-blue:hover,
|
|
4497
4981
|
.lights-out .seeds-token-blue:active {
|
|
4498
4982
|
border: 1px solid
|
|
4499
|
-
color-mix(
|
|
4983
|
+
color-mix(
|
|
4984
|
+
in srgb,
|
|
4985
|
+
var(--color-container-border-decorative-blue),
|
|
4986
|
+
white 20%
|
|
4987
|
+
);
|
|
4500
4988
|
}
|
|
4501
4989
|
|
|
4502
4990
|
[data-theme="dark"] .seeds-token-invalid:hover,
|
|
@@ -4726,14 +5214,9 @@
|
|
|
4726
5214
|
}
|
|
4727
5215
|
|
|
4728
5216
|
.seeds-tree-combobox-input-group:focus-within {
|
|
4729
|
-
box-shadow:
|
|
4730
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
5217
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4731
5218
|
0 0px 0px 4px
|
|
4732
|
-
color-mix(
|
|
4733
|
-
in srgb,
|
|
4734
|
-
var(--color-button-primary-bg-base),
|
|
4735
|
-
transparent 70%
|
|
4736
|
-
);
|
|
5219
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4737
5220
|
outline: none;
|
|
4738
5221
|
}
|
|
4739
5222
|
|
|
@@ -4790,8 +5273,7 @@
|
|
|
4790
5273
|
cursor: default;
|
|
4791
5274
|
outline: none;
|
|
4792
5275
|
user-select: none;
|
|
4793
|
-
transition:
|
|
4794
|
-
border-color var(--duration-fast) var(--ease-ease_in),
|
|
5276
|
+
transition: border-color var(--duration-fast) var(--ease-ease_in),
|
|
4795
5277
|
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
4796
5278
|
}
|
|
4797
5279
|
|
|
@@ -4800,14 +5282,9 @@
|
|
|
4800
5282
|
}
|
|
4801
5283
|
|
|
4802
5284
|
.seeds-tree-select-trigger:focus-visible {
|
|
4803
|
-
box-shadow:
|
|
4804
|
-
0 0 0 1px var(--color-button-primary-bg-base),
|
|
5285
|
+
box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
|
|
4805
5286
|
0 0px 0px 4px
|
|
4806
|
-
color-mix(
|
|
4807
|
-
in srgb,
|
|
4808
|
-
var(--color-button-primary-bg-base),
|
|
4809
|
-
transparent 70%
|
|
4810
|
-
);
|
|
5287
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
4811
5288
|
outline: none;
|
|
4812
5289
|
}
|
|
4813
5290
|
|