@plus234feed/ds 0.9.0 → 0.11.0
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/package.json +1 -1
- package/src/components.css +29 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plus234feed/ds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Plus234Feed design system. Editorial tokens, type scale and components for a news intelligence platform: newspaper hierarchy, accessible colour in both themes, one component per job.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
package/src/components.css
CHANGED
|
@@ -1417,8 +1417,37 @@ textarea.p234-field__control {
|
|
|
1417
1417
|
font-size: var(--p234-type-meta-size);
|
|
1418
1418
|
color: var(--p234-color-ink-muted);
|
|
1419
1419
|
}
|
|
1420
|
+
|
|
1421
|
+
/* A logo, flag or favicon beside the name.
|
|
1422
|
+
*
|
|
1423
|
+
* Left as an inline image it sits in the text flow, so a long name wraps
|
|
1424
|
+
* underneath it and the mark ends up alone on the first line. The name slot
|
|
1425
|
+
* becomes a row only when it actually contains a mark, so every directory
|
|
1426
|
+
* without one is untouched. */
|
|
1427
|
+
.p234-directory__name:has(.p234-directory__mark) {
|
|
1428
|
+
display: flex;
|
|
1429
|
+
align-items: center;
|
|
1430
|
+
gap: var(--p234-space-3);
|
|
1431
|
+
min-width: 0;
|
|
1432
|
+
}
|
|
1433
|
+
.p234-directory__mark {
|
|
1434
|
+
flex: none;
|
|
1435
|
+
width: var(--p234-icon-size-md);
|
|
1436
|
+
height: var(--p234-icon-size-md);
|
|
1437
|
+
border-radius: var(--p234-radius-sm);
|
|
1438
|
+
object-fit: contain;
|
|
1439
|
+
}
|
|
1420
1440
|
.p234-directory__value {
|
|
1421
1441
|
margin-left: auto;
|
|
1442
|
+
/* A value is often a figure and its change together. A space between them
|
|
1443
|
+
in the markup collapses against the delta's arrow, which is a
|
|
1444
|
+
pseudo-element, and the two numbers run into each other as
|
|
1445
|
+
"N6.70 up 9.84%" with nothing between them. A gap cannot collapse.
|
|
1446
|
+
With a single child this behaves exactly as it did. */
|
|
1447
|
+
display: flex;
|
|
1448
|
+
align-items: baseline;
|
|
1449
|
+
gap: var(--p234-space-3);
|
|
1450
|
+
white-space: nowrap;
|
|
1422
1451
|
font-family: var(--p234-type-data-sm-family);
|
|
1423
1452
|
font-size: var(--p234-type-data-sm-size);
|
|
1424
1453
|
font-weight: var(--p234-type-data-sm-weight);
|