@nanisoft/prism-llms 0.2.0 → 0.4.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/dist/data.json +44 -6
- package/dist/llms-full.txt +893 -53
- package/dist/llms.txt +8 -0
- package/dist/md/blocks/site-footer.md +19 -0
- package/dist/md/blocks/site-header.md +19 -0
- package/dist/md/docs/brand.md +2 -2
- package/dist/md/theme/blue-dark.md +22 -21
- package/dist/md/theme/blue-light.md +7 -6
- package/dist/md/theme/green-dark.md +5 -4
- package/dist/md/theme/green-light.md +21 -20
- package/dist/md/theme/lavender-dark.md +127 -0
- package/dist/md/theme/lavender-light.md +129 -0
- package/dist/md/theme/peach-dark.md +127 -0
- package/dist/md/theme/peach-light.md +129 -0
- package/dist/md/theme/rose-dark.md +127 -0
- package/dist/md/theme/rose-light.md +129 -0
- package/package.json +4 -4
package/dist/llms-full.txt
CHANGED
|
@@ -19,8 +19,8 @@ brand, and this page — not the license — is where the brand rules live.
|
|
|
19
19
|
## What is ours
|
|
20
20
|
|
|
21
21
|
The names **Prism** and **NaniSoft**, the Prism wordmark, the Spectral
|
|
22
|
-
Refraction visual language, and the brand packs (including their names
|
|
23
|
-
and
|
|
22
|
+
Refraction visual language, and the brand packs (including their names —
|
|
23
|
+
blue, green, lavender, rose, and peach) identify Prism as built by NaniSoft.
|
|
24
24
|
|
|
25
25
|
## What you may do
|
|
26
26
|
|
|
@@ -1305,6 +1305,50 @@ import { PageHeader } from '@nanisoft/prism-ui/blocks';
|
|
|
1305
1305
|
|
|
1306
1306
|
---
|
|
1307
1307
|
|
|
1308
|
+
# SiteFooter
|
|
1309
|
+
|
|
1310
|
+
Prism block — full documentation pending.
|
|
1311
|
+
|
|
1312
|
+
```ts
|
|
1313
|
+
import { SiteFooter } from '@nanisoft/prism-ui/blocks';
|
|
1314
|
+
```
|
|
1315
|
+
|
|
1316
|
+
`SiteFooter` is a Prism block. Full documentation is pending — the prism MCP answers API questions in the meantime (`get_item_props`, `get_item_source`).
|
|
1317
|
+
|
|
1318
|
+
## Props
|
|
1319
|
+
|
|
1320
|
+
| Prop | Type | Default | Description |
|
|
1321
|
+
| --- | --- | --- | --- |
|
|
1322
|
+
| `site` | PrismProductId | — | The site's registry id — marks the current product in the grid. |
|
|
1323
|
+
| `columns` (optional) | readonly SiteFooterColumn[] | — | Site-declared link columns, rendered beside the product grid. |
|
|
1324
|
+
| `social` (optional) | readonly SiteFooterSocialLink[] | — | Social links with app-supplied icons. |
|
|
1325
|
+
| `legal` (optional) | ReactNode | — | Overrides the default "© NaniSoft" line. |
|
|
1326
|
+
| `className` (optional) | string | — | — |
|
|
1327
|
+
|
|
1328
|
+
---
|
|
1329
|
+
|
|
1330
|
+
# SiteHeader
|
|
1331
|
+
|
|
1332
|
+
Prism block — full documentation pending.
|
|
1333
|
+
|
|
1334
|
+
```ts
|
|
1335
|
+
import { SiteHeader } from '@nanisoft/prism-ui/blocks';
|
|
1336
|
+
```
|
|
1337
|
+
|
|
1338
|
+
`SiteHeader` is a Prism block. Full documentation is pending — the prism MCP answers API questions in the meantime (`get_item_props`, `get_item_source`).
|
|
1339
|
+
|
|
1340
|
+
## Props
|
|
1341
|
+
|
|
1342
|
+
| Prop | Type | Default | Description |
|
|
1343
|
+
| --- | --- | --- | --- |
|
|
1344
|
+
| `site` | PrismProductId | — | The site's registry id — identity is static and known at build time. |
|
|
1345
|
+
| `nav` (optional) | readonly PrismNavLink[] | — | Lean site nav, rendered between the brand and the actions. |
|
|
1346
|
+
| `cta` (optional) | ReactNode | — | Right-pinned call to action, before the switcher. |
|
|
1347
|
+
| `sticky` (optional) | boolean | — | Sticky by default; pass false to pin the header static. |
|
|
1348
|
+
| `className` (optional) | string | — | — |
|
|
1349
|
+
|
|
1350
|
+
---
|
|
1351
|
+
|
|
1308
1352
|
# BlogLayout
|
|
1309
1353
|
|
|
1310
1354
|
Prism page — full documentation pending.
|
|
@@ -1373,10 +1417,10 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'dark' });
|
|
|
1373
1417
|
| Token | Value |
|
|
1374
1418
|
| --- | --- |
|
|
1375
1419
|
| `colorError` | #DC2626 |
|
|
1376
|
-
| `colorGround` | #
|
|
1377
|
-
| `colorHairline` | rgba(
|
|
1420
|
+
| `colorGround` | #0D1730 |
|
|
1421
|
+
| `colorHairline` | rgba(158, 191, 255, 0.18) |
|
|
1378
1422
|
| `colorInfo` | #2563EB |
|
|
1379
|
-
| `colorInk` | #
|
|
1423
|
+
| `colorInk` | #4C8DF6 |
|
|
1380
1424
|
| `colorSuccess` | #16A34A |
|
|
1381
1425
|
| `colorText` | #E8EEF9 |
|
|
1382
1426
|
| `colorWarning` | #D97706 |
|
|
@@ -1401,13 +1445,13 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'dark' });
|
|
|
1401
1445
|
|
|
1402
1446
|
| Token | Value |
|
|
1403
1447
|
| --- | --- |
|
|
1404
|
-
| `accentLive` | rgba(
|
|
1448
|
+
| `accentLive` | rgba(76, 141, 246, 0.2) |
|
|
1405
1449
|
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
1406
1450
|
| `elevationNone` | none |
|
|
1407
|
-
| `focusRing` | rgba(
|
|
1408
|
-
| `hairlineFaint` | rgba(
|
|
1409
|
-
| `hairlineStrong` | rgba(
|
|
1410
|
-
| `inkPrimary` | #
|
|
1451
|
+
| `focusRing` | rgba(76, 141, 246, 0.55) |
|
|
1452
|
+
| `hairlineFaint` | rgba(76, 141, 246, 0.1) |
|
|
1453
|
+
| `hairlineStrong` | rgba(158, 191, 255, 0.18) |
|
|
1454
|
+
| `inkPrimary` | #4C8DF6 |
|
|
1411
1455
|
| `motionCurveOpacity` | linear |
|
|
1412
1456
|
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1413
1457
|
| `motionDurationFast` | 80ms |
|
|
@@ -1423,8 +1467,8 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'dark' });
|
|
|
1423
1467
|
| `stateInfo` | #2563EB |
|
|
1424
1468
|
| `stateSuccess` | #16A34A |
|
|
1425
1469
|
| `stateWarning` | #D97706 |
|
|
1426
|
-
| `surfaceContainer` | #
|
|
1427
|
-
| `surfaceGround` | #
|
|
1470
|
+
| `surfaceContainer` | #0D1730 |
|
|
1471
|
+
| `surfaceGround` | #0D1730 |
|
|
1428
1472
|
| `surfaceScrim` | rgba(4, 10, 20, 0.72) |
|
|
1429
1473
|
| `textFaint` | rgba(232, 238, 249, 0.3) |
|
|
1430
1474
|
| `textOnInk` | #0B1220 |
|
|
@@ -1446,23 +1490,24 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'dark' });
|
|
|
1446
1490
|
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
1447
1491
|
| `boxShadowSecondary` | none |
|
|
1448
1492
|
| `boxShadowTertiary` | none |
|
|
1449
|
-
| `colorBgBase` | #
|
|
1493
|
+
| `colorBgBase` | #0D1730 |
|
|
1450
1494
|
| `colorBgMask` | rgba(4, 10, 20, 0.72) |
|
|
1451
|
-
| `colorBgTextActive` | rgba(
|
|
1452
|
-
| `colorBorder` | rgba(
|
|
1453
|
-
| `colorBorderSecondary` | rgba(
|
|
1495
|
+
| `colorBgTextActive` | rgba(76, 141, 246, 0.2) |
|
|
1496
|
+
| `colorBorder` | rgba(158, 191, 255, 0.18) |
|
|
1497
|
+
| `colorBorderSecondary` | rgba(76, 141, 246, 0.1) |
|
|
1454
1498
|
| `colorError` | #DC2626 |
|
|
1455
1499
|
| `colorInfo` | #2563EB |
|
|
1456
|
-
| `colorLink` | #
|
|
1457
|
-
| `colorPrimary` | #
|
|
1458
|
-
| `colorPrimaryTextActive` | #
|
|
1459
|
-
| `colorSplit` | rgba(
|
|
1500
|
+
| `colorLink` | #4C8DF6 |
|
|
1501
|
+
| `colorPrimary` | #4C8DF6 |
|
|
1502
|
+
| `colorPrimaryTextActive` | #4C8DF6 |
|
|
1503
|
+
| `colorSplit` | rgba(76, 141, 246, 0.1) |
|
|
1460
1504
|
| `colorSuccess` | #16A34A |
|
|
1461
1505
|
| `colorTextBase` | #E8EEF9 |
|
|
1506
|
+
| `colorTextPlaceholder` | rgba(232, 238, 249, 0.45) |
|
|
1462
1507
|
| `colorWarning` | #D97706 |
|
|
1463
|
-
| `controlItemBgActive` | rgba(
|
|
1464
|
-
| `controlItemBgActiveHover` | rgba(
|
|
1465
|
-
| `controlOutline` | rgba(
|
|
1508
|
+
| `controlItemBgActive` | rgba(76, 141, 246, 0.2) |
|
|
1509
|
+
| `controlItemBgActiveHover` | rgba(76, 141, 246, 0.2) |
|
|
1510
|
+
| `controlOutline` | rgba(76, 141, 246, 0.55) |
|
|
1466
1511
|
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
1467
1512
|
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
1468
1513
|
| `fontSize` | 14 |
|
|
@@ -1503,8 +1548,8 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'light' });
|
|
|
1503
1548
|
| Token | Value |
|
|
1504
1549
|
| --- | --- |
|
|
1505
1550
|
| `colorError` | #DC2626 |
|
|
1506
|
-
| `colorGround` | #
|
|
1507
|
-
| `colorHairline` | rgba(
|
|
1551
|
+
| `colorGround` | #EEF3FC |
|
|
1552
|
+
| `colorHairline` | rgba(30, 64, 158, 0.10) |
|
|
1508
1553
|
| `colorInfo` | #2563EB |
|
|
1509
1554
|
| `colorInk` | #2563EB |
|
|
1510
1555
|
| `colorSuccess` | #16A34A |
|
|
@@ -1537,7 +1582,7 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'light' });
|
|
|
1537
1582
|
| `elevationNone` | none |
|
|
1538
1583
|
| `focusRing` | rgba(37, 99, 235, 0.35) |
|
|
1539
1584
|
| `hairlineFaint` | rgba(37, 99, 235, 0.06) |
|
|
1540
|
-
| `hairlineStrong` | rgba(
|
|
1585
|
+
| `hairlineStrong` | rgba(30, 64, 158, 0.10) |
|
|
1541
1586
|
| `inkPrimary` | #2563EB |
|
|
1542
1587
|
| `motionCurveOpacity` | linear |
|
|
1543
1588
|
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
@@ -1555,7 +1600,7 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'light' });
|
|
|
1555
1600
|
| `stateSuccess` | #16A34A |
|
|
1556
1601
|
| `stateWarning` | #D97706 |
|
|
1557
1602
|
| `surfaceContainer` | #FFFFFF |
|
|
1558
|
-
| `surfaceGround` | #
|
|
1603
|
+
| `surfaceGround` | #EEF3FC |
|
|
1559
1604
|
| `surfaceScrim` | rgba(15, 23, 42, 0.32) |
|
|
1560
1605
|
| `textFaint` | rgba(26, 42, 74, 0.3) |
|
|
1561
1606
|
| `textOnInk` | #FFFFFF |
|
|
@@ -1578,10 +1623,10 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'light' });
|
|
|
1578
1623
|
| `boxShadowSecondary` | none |
|
|
1579
1624
|
| `boxShadowTertiary` | none |
|
|
1580
1625
|
| `colorBgBase` | #FFFFFF |
|
|
1581
|
-
| `colorBgLayout` | #
|
|
1626
|
+
| `colorBgLayout` | #EEF3FC |
|
|
1582
1627
|
| `colorBgMask` | rgba(15, 23, 42, 0.32) |
|
|
1583
1628
|
| `colorBgTextActive` | rgba(37, 99, 235, 0.1) |
|
|
1584
|
-
| `colorBorder` | rgba(
|
|
1629
|
+
| `colorBorder` | rgba(30, 64, 158, 0.10) |
|
|
1585
1630
|
| `colorBorderSecondary` | rgba(37, 99, 235, 0.06) |
|
|
1586
1631
|
| `colorError` | #DC2626 |
|
|
1587
1632
|
| `colorInfo` | #2563EB |
|
|
@@ -1591,6 +1636,7 @@ const theme = createPrismTheme({ pack: 'blue', mode: 'light' });
|
|
|
1591
1636
|
| `colorSplit` | rgba(37, 99, 235, 0.06) |
|
|
1592
1637
|
| `colorSuccess` | #16A34A |
|
|
1593
1638
|
| `colorTextBase` | #1A2A4A |
|
|
1639
|
+
| `colorTextPlaceholder` | rgba(26, 42, 74, 0.45) |
|
|
1594
1640
|
| `colorWarning` | #D97706 |
|
|
1595
1641
|
| `controlItemBgActive` | rgba(37, 99, 235, 0.1) |
|
|
1596
1642
|
| `controlItemBgActiveHover` | rgba(37, 99, 235, 0.1) |
|
|
@@ -1635,7 +1681,7 @@ const theme = createPrismTheme({ pack: 'green', mode: 'dark' });
|
|
|
1635
1681
|
| Token | Value |
|
|
1636
1682
|
| --- | --- |
|
|
1637
1683
|
| `colorError` | #DC2626 |
|
|
1638
|
-
| `colorGround` | #
|
|
1684
|
+
| `colorGround` | #0C1812 |
|
|
1639
1685
|
| `colorHairline` | rgba(134, 239, 172, 0.16) |
|
|
1640
1686
|
| `colorInfo` | #2563EB |
|
|
1641
1687
|
| `colorInk` | #22C55E |
|
|
@@ -1685,8 +1731,8 @@ const theme = createPrismTheme({ pack: 'green', mode: 'dark' });
|
|
|
1685
1731
|
| `stateInfo` | #2563EB |
|
|
1686
1732
|
| `stateSuccess` | #16A34A |
|
|
1687
1733
|
| `stateWarning` | #D97706 |
|
|
1688
|
-
| `surfaceContainer` | #
|
|
1689
|
-
| `surfaceGround` | #
|
|
1734
|
+
| `surfaceContainer` | #0C1812 |
|
|
1735
|
+
| `surfaceGround` | #0C1812 |
|
|
1690
1736
|
| `surfaceScrim` | rgba(4, 10, 20, 0.72) |
|
|
1691
1737
|
| `textFaint` | rgba(232, 238, 249, 0.3) |
|
|
1692
1738
|
| `textOnInk` | #0B1220 |
|
|
@@ -1708,7 +1754,7 @@ const theme = createPrismTheme({ pack: 'green', mode: 'dark' });
|
|
|
1708
1754
|
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
1709
1755
|
| `boxShadowSecondary` | none |
|
|
1710
1756
|
| `boxShadowTertiary` | none |
|
|
1711
|
-
| `colorBgBase` | #
|
|
1757
|
+
| `colorBgBase` | #0C1812 |
|
|
1712
1758
|
| `colorBgMask` | rgba(4, 10, 20, 0.72) |
|
|
1713
1759
|
| `colorBgTextActive` | rgba(34, 197, 94, 0.2) |
|
|
1714
1760
|
| `colorBorder` | rgba(134, 239, 172, 0.16) |
|
|
@@ -1721,6 +1767,7 @@ const theme = createPrismTheme({ pack: 'green', mode: 'dark' });
|
|
|
1721
1767
|
| `colorSplit` | rgba(34, 197, 94, 0.1) |
|
|
1722
1768
|
| `colorSuccess` | #16A34A |
|
|
1723
1769
|
| `colorTextBase` | #E8EEF9 |
|
|
1770
|
+
| `colorTextPlaceholder` | rgba(232, 238, 249, 0.45) |
|
|
1724
1771
|
| `colorWarning` | #D97706 |
|
|
1725
1772
|
| `controlItemBgActive` | rgba(34, 197, 94, 0.2) |
|
|
1726
1773
|
| `controlItemBgActiveHover` | rgba(34, 197, 94, 0.2) |
|
|
@@ -1765,10 +1812,10 @@ const theme = createPrismTheme({ pack: 'green', mode: 'light' });
|
|
|
1765
1812
|
| Token | Value |
|
|
1766
1813
|
| --- | --- |
|
|
1767
1814
|
| `colorError` | #DC2626 |
|
|
1768
|
-
| `colorGround` | #
|
|
1769
|
-
| `colorHairline` | rgba(
|
|
1815
|
+
| `colorGround` | #E9F6EF |
|
|
1816
|
+
| `colorHairline` | rgba(17, 90, 47, 0.10) |
|
|
1770
1817
|
| `colorInfo` | #2563EB |
|
|
1771
|
-
| `colorInk` | #
|
|
1818
|
+
| `colorInk` | #117A3B |
|
|
1772
1819
|
| `colorSuccess` | #16A34A |
|
|
1773
1820
|
| `colorSurface` | #FFFFFF |
|
|
1774
1821
|
| `colorText` | #162A1A |
|
|
@@ -1794,13 +1841,13 @@ const theme = createPrismTheme({ pack: 'green', mode: 'light' });
|
|
|
1794
1841
|
|
|
1795
1842
|
| Token | Value |
|
|
1796
1843
|
| --- | --- |
|
|
1797
|
-
| `accentLive` | rgba(
|
|
1844
|
+
| `accentLive` | rgba(17, 122, 59, 0.1) |
|
|
1798
1845
|
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
1799
1846
|
| `elevationNone` | none |
|
|
1800
|
-
| `focusRing` | rgba(
|
|
1801
|
-
| `hairlineFaint` | rgba(
|
|
1802
|
-
| `hairlineStrong` | rgba(
|
|
1803
|
-
| `inkPrimary` | #
|
|
1847
|
+
| `focusRing` | rgba(17, 122, 59, 0.35) |
|
|
1848
|
+
| `hairlineFaint` | rgba(17, 122, 59, 0.06) |
|
|
1849
|
+
| `hairlineStrong` | rgba(17, 90, 47, 0.10) |
|
|
1850
|
+
| `inkPrimary` | #117A3B |
|
|
1804
1851
|
| `motionCurveOpacity` | linear |
|
|
1805
1852
|
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1806
1853
|
| `motionDurationFast` | 80ms |
|
|
@@ -1817,7 +1864,7 @@ const theme = createPrismTheme({ pack: 'green', mode: 'light' });
|
|
|
1817
1864
|
| `stateSuccess` | #16A34A |
|
|
1818
1865
|
| `stateWarning` | #D97706 |
|
|
1819
1866
|
| `surfaceContainer` | #FFFFFF |
|
|
1820
|
-
| `surfaceGround` | #
|
|
1867
|
+
| `surfaceGround` | #E9F6EF |
|
|
1821
1868
|
| `surfaceScrim` | rgba(15, 23, 42, 0.32) |
|
|
1822
1869
|
| `textFaint` | rgba(22, 42, 26, 0.3) |
|
|
1823
1870
|
| `textOnInk` | #FFFFFF |
|
|
@@ -1840,23 +1887,816 @@ const theme = createPrismTheme({ pack: 'green', mode: 'light' });
|
|
|
1840
1887
|
| `boxShadowSecondary` | none |
|
|
1841
1888
|
| `boxShadowTertiary` | none |
|
|
1842
1889
|
| `colorBgBase` | #FFFFFF |
|
|
1843
|
-
| `colorBgLayout` | #
|
|
1890
|
+
| `colorBgLayout` | #E9F6EF |
|
|
1844
1891
|
| `colorBgMask` | rgba(15, 23, 42, 0.32) |
|
|
1845
|
-
| `colorBgTextActive` | rgba(
|
|
1846
|
-
| `colorBorder` | rgba(
|
|
1847
|
-
| `colorBorderSecondary` | rgba(
|
|
1892
|
+
| `colorBgTextActive` | rgba(17, 122, 59, 0.1) |
|
|
1893
|
+
| `colorBorder` | rgba(17, 90, 47, 0.10) |
|
|
1894
|
+
| `colorBorderSecondary` | rgba(17, 122, 59, 0.06) |
|
|
1848
1895
|
| `colorError` | #DC2626 |
|
|
1849
1896
|
| `colorInfo` | #2563EB |
|
|
1850
|
-
| `colorLink` | #
|
|
1851
|
-
| `colorPrimary` | #
|
|
1852
|
-
| `colorPrimaryTextActive` | #
|
|
1853
|
-
| `colorSplit` | rgba(
|
|
1897
|
+
| `colorLink` | #117A3B |
|
|
1898
|
+
| `colorPrimary` | #117A3B |
|
|
1899
|
+
| `colorPrimaryTextActive` | #117A3B |
|
|
1900
|
+
| `colorSplit` | rgba(17, 122, 59, 0.06) |
|
|
1854
1901
|
| `colorSuccess` | #16A34A |
|
|
1855
1902
|
| `colorTextBase` | #162A1A |
|
|
1903
|
+
| `colorTextPlaceholder` | rgba(22, 42, 26, 0.45) |
|
|
1904
|
+
| `colorWarning` | #D97706 |
|
|
1905
|
+
| `controlItemBgActive` | rgba(17, 122, 59, 0.1) |
|
|
1906
|
+
| `controlItemBgActiveHover` | rgba(17, 122, 59, 0.1) |
|
|
1907
|
+
| `controlOutline` | rgba(17, 122, 59, 0.35) |
|
|
1908
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
1909
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
1910
|
+
| `fontSize` | 14 |
|
|
1911
|
+
| `fontWeightStrong` | 600 |
|
|
1912
|
+
| `lineWidth` | 1 |
|
|
1913
|
+
| `motionBase` | 0 |
|
|
1914
|
+
| `motionDurationSlow` | 280ms |
|
|
1915
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1916
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1917
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1918
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1919
|
+
| `motionUnit` | 0.08 |
|
|
1920
|
+
| `sizeStep` | 4 |
|
|
1921
|
+
| `sizeUnit` | 4 |
|
|
1922
|
+
|
|
1923
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
1924
|
+
|
|
1925
|
+
|
|
1926
|
+
---
|
|
1927
|
+
|
|
1928
|
+
# Theming — Lavender pack · beam-dark mode
|
|
1929
|
+
|
|
1930
|
+
> `createPrismTheme({ pack: 'lavender', mode: 'dark' })` returns one frozen `PrismTheme`; cssVar key `prism-lavender-dark`. antd derives everything not listed through its dark algorithm.
|
|
1931
|
+
|
|
1932
|
+
## Usage
|
|
1933
|
+
|
|
1934
|
+
```ts
|
|
1935
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
1936
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
1937
|
+
|
|
1938
|
+
const theme = createPrismTheme({ pack: 'lavender', mode: 'dark' });
|
|
1939
|
+
|
|
1940
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
1941
|
+
```
|
|
1942
|
+
|
|
1943
|
+
## Tier 0 — primitives
|
|
1944
|
+
|
|
1945
|
+
| Token | Value |
|
|
1946
|
+
| --- | --- |
|
|
1947
|
+
| `colorError` | #DC2626 |
|
|
1948
|
+
| `colorGround` | #131022 |
|
|
1949
|
+
| `colorHairline` | rgba(157, 141, 244, 0.17) |
|
|
1950
|
+
| `colorInfo` | #2563EB |
|
|
1951
|
+
| `colorInk` | #9D8DF4 |
|
|
1952
|
+
| `colorSuccess` | #16A34A |
|
|
1953
|
+
| `colorText` | #ECE9FA |
|
|
1954
|
+
| `colorWarning` | #D97706 |
|
|
1955
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
1956
|
+
| `motionCurveOpacity` | linear |
|
|
1957
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1958
|
+
| `motionDurationFast` | 80ms |
|
|
1959
|
+
| `motionDurationMid` | 160ms |
|
|
1960
|
+
| `motionDurationSlow` | 280ms |
|
|
1961
|
+
| `shapeRadiusBase` | 4 |
|
|
1962
|
+
| `shapeRadiusLg` | 6 |
|
|
1963
|
+
| `shapeRadiusOuter` | 4 |
|
|
1964
|
+
| `shapeRadiusSm` | 2 |
|
|
1965
|
+
| `spaceStep` | 4 |
|
|
1966
|
+
| `spaceUnit` | 4 |
|
|
1967
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
1968
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
1969
|
+
| `typeSizeUi` | 14 |
|
|
1970
|
+
| `typeWeightStrong` | 600 |
|
|
1971
|
+
|
|
1972
|
+
## Tier 1 — semantics
|
|
1973
|
+
|
|
1974
|
+
| Token | Value |
|
|
1975
|
+
| --- | --- |
|
|
1976
|
+
| `accentLive` | rgba(157, 141, 244, 0.2) |
|
|
1977
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
1978
|
+
| `elevationNone` | none |
|
|
1979
|
+
| `focusRing` | rgba(157, 141, 244, 0.55) |
|
|
1980
|
+
| `hairlineFaint` | rgba(157, 141, 244, 0.1) |
|
|
1981
|
+
| `hairlineStrong` | rgba(157, 141, 244, 0.17) |
|
|
1982
|
+
| `inkPrimary` | #9D8DF4 |
|
|
1983
|
+
| `motionCurveOpacity` | linear |
|
|
1984
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
1985
|
+
| `motionDurationFast` | 80ms |
|
|
1986
|
+
| `motionDurationMid` | 160ms |
|
|
1987
|
+
| `motionDurationSlow` | 280ms |
|
|
1988
|
+
| `shapeRadiusBase` | 4 |
|
|
1989
|
+
| `shapeRadiusLg` | 6 |
|
|
1990
|
+
| `shapeRadiusOuter` | 4 |
|
|
1991
|
+
| `shapeRadiusSm` | 2 |
|
|
1992
|
+
| `spaceStep` | 4 |
|
|
1993
|
+
| `spaceUnit` | 4 |
|
|
1994
|
+
| `stateError` | #DC2626 |
|
|
1995
|
+
| `stateInfo` | #2563EB |
|
|
1996
|
+
| `stateSuccess` | #16A34A |
|
|
1997
|
+
| `stateWarning` | #D97706 |
|
|
1998
|
+
| `surfaceContainer` | #131022 |
|
|
1999
|
+
| `surfaceGround` | #131022 |
|
|
2000
|
+
| `surfaceScrim` | rgba(4, 10, 20, 0.72) |
|
|
2001
|
+
| `textFaint` | rgba(236, 233, 250, 0.3) |
|
|
2002
|
+
| `textOnInk` | #0B1220 |
|
|
2003
|
+
| `textPrimary` | #ECE9FA |
|
|
2004
|
+
| `textSecondary` | rgba(236, 233, 250, 0.68) |
|
|
2005
|
+
| `textTertiary` | rgba(236, 233, 250, 0.45) |
|
|
2006
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2007
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2008
|
+
| `typeSize` | 14 |
|
|
2009
|
+
| `typeWeight` | 600 |
|
|
2010
|
+
|
|
2011
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2012
|
+
|
|
2013
|
+
| Token | Value |
|
|
2014
|
+
| --- | --- |
|
|
2015
|
+
| `borderRadius` | 4 |
|
|
2016
|
+
| `borderRadiusLG` | 6 |
|
|
2017
|
+
| `borderRadiusSM` | 2 |
|
|
2018
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2019
|
+
| `boxShadowSecondary` | none |
|
|
2020
|
+
| `boxShadowTertiary` | none |
|
|
2021
|
+
| `colorBgBase` | #131022 |
|
|
2022
|
+
| `colorBgMask` | rgba(4, 10, 20, 0.72) |
|
|
2023
|
+
| `colorBgTextActive` | rgba(157, 141, 244, 0.2) |
|
|
2024
|
+
| `colorBorder` | rgba(157, 141, 244, 0.17) |
|
|
2025
|
+
| `colorBorderSecondary` | rgba(157, 141, 244, 0.1) |
|
|
2026
|
+
| `colorError` | #DC2626 |
|
|
2027
|
+
| `colorInfo` | #2563EB |
|
|
2028
|
+
| `colorLink` | #9D8DF4 |
|
|
2029
|
+
| `colorPrimary` | #9D8DF4 |
|
|
2030
|
+
| `colorPrimaryTextActive` | #9D8DF4 |
|
|
2031
|
+
| `colorSplit` | rgba(157, 141, 244, 0.1) |
|
|
2032
|
+
| `colorSuccess` | #16A34A |
|
|
2033
|
+
| `colorTextBase` | #ECE9FA |
|
|
2034
|
+
| `colorTextPlaceholder` | rgba(236, 233, 250, 0.45) |
|
|
2035
|
+
| `colorWarning` | #D97706 |
|
|
2036
|
+
| `controlItemBgActive` | rgba(157, 141, 244, 0.2) |
|
|
2037
|
+
| `controlItemBgActiveHover` | rgba(157, 141, 244, 0.2) |
|
|
2038
|
+
| `controlOutline` | rgba(157, 141, 244, 0.55) |
|
|
2039
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2040
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2041
|
+
| `fontSize` | 14 |
|
|
2042
|
+
| `fontWeightStrong` | 600 |
|
|
2043
|
+
| `lineWidth` | 1 |
|
|
2044
|
+
| `motionBase` | 0 |
|
|
2045
|
+
| `motionDurationSlow` | 280ms |
|
|
2046
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2047
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2048
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2049
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2050
|
+
| `motionUnit` | 0.08 |
|
|
2051
|
+
| `sizeStep` | 4 |
|
|
2052
|
+
| `sizeUnit` | 4 |
|
|
2053
|
+
|
|
2054
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
2055
|
+
|
|
2056
|
+
|
|
2057
|
+
---
|
|
2058
|
+
|
|
2059
|
+
# Theming — Lavender pack · light mode
|
|
2060
|
+
|
|
2061
|
+
> `createPrismTheme({ pack: 'lavender', mode: 'light' })` returns one frozen `PrismTheme`; cssVar key `prism-lavender-light`. antd derives everything not listed through its default algorithm.
|
|
2062
|
+
|
|
2063
|
+
## Usage
|
|
2064
|
+
|
|
2065
|
+
```ts
|
|
2066
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
2067
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
2068
|
+
|
|
2069
|
+
const theme = createPrismTheme({ pack: 'lavender', mode: 'light' });
|
|
2070
|
+
|
|
2071
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
2072
|
+
```
|
|
2073
|
+
|
|
2074
|
+
## Tier 0 — primitives
|
|
2075
|
+
|
|
2076
|
+
| Token | Value |
|
|
2077
|
+
| --- | --- |
|
|
2078
|
+
| `colorError` | #DC2626 |
|
|
2079
|
+
| `colorGround` | #F2F1FB |
|
|
2080
|
+
| `colorHairline` | rgba(84, 70, 176, 0.10) |
|
|
2081
|
+
| `colorInfo` | #2563EB |
|
|
2082
|
+
| `colorInk` | #6A58CE |
|
|
2083
|
+
| `colorSuccess` | #16A34A |
|
|
2084
|
+
| `colorSurface` | #FFFFFF |
|
|
2085
|
+
| `colorText` | #262044 |
|
|
2086
|
+
| `colorWarning` | #D97706 |
|
|
2087
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2088
|
+
| `motionCurveOpacity` | linear |
|
|
2089
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2090
|
+
| `motionDurationFast` | 80ms |
|
|
2091
|
+
| `motionDurationMid` | 160ms |
|
|
2092
|
+
| `motionDurationSlow` | 280ms |
|
|
2093
|
+
| `shapeRadiusBase` | 4 |
|
|
2094
|
+
| `shapeRadiusLg` | 6 |
|
|
2095
|
+
| `shapeRadiusOuter` | 4 |
|
|
2096
|
+
| `shapeRadiusSm` | 2 |
|
|
2097
|
+
| `spaceStep` | 4 |
|
|
2098
|
+
| `spaceUnit` | 4 |
|
|
2099
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2100
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2101
|
+
| `typeSizeUi` | 14 |
|
|
2102
|
+
| `typeWeightStrong` | 600 |
|
|
2103
|
+
|
|
2104
|
+
## Tier 1 — semantics
|
|
2105
|
+
|
|
2106
|
+
| Token | Value |
|
|
2107
|
+
| --- | --- |
|
|
2108
|
+
| `accentLive` | rgba(106, 88, 206, 0.1) |
|
|
2109
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2110
|
+
| `elevationNone` | none |
|
|
2111
|
+
| `focusRing` | rgba(106, 88, 206, 0.35) |
|
|
2112
|
+
| `hairlineFaint` | rgba(106, 88, 206, 0.06) |
|
|
2113
|
+
| `hairlineStrong` | rgba(84, 70, 176, 0.10) |
|
|
2114
|
+
| `inkPrimary` | #6A58CE |
|
|
2115
|
+
| `motionCurveOpacity` | linear |
|
|
2116
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2117
|
+
| `motionDurationFast` | 80ms |
|
|
2118
|
+
| `motionDurationMid` | 160ms |
|
|
2119
|
+
| `motionDurationSlow` | 280ms |
|
|
2120
|
+
| `shapeRadiusBase` | 4 |
|
|
2121
|
+
| `shapeRadiusLg` | 6 |
|
|
2122
|
+
| `shapeRadiusOuter` | 4 |
|
|
2123
|
+
| `shapeRadiusSm` | 2 |
|
|
2124
|
+
| `spaceStep` | 4 |
|
|
2125
|
+
| `spaceUnit` | 4 |
|
|
2126
|
+
| `stateError` | #DC2626 |
|
|
2127
|
+
| `stateInfo` | #2563EB |
|
|
2128
|
+
| `stateSuccess` | #16A34A |
|
|
2129
|
+
| `stateWarning` | #D97706 |
|
|
2130
|
+
| `surfaceContainer` | #FFFFFF |
|
|
2131
|
+
| `surfaceGround` | #F2F1FB |
|
|
2132
|
+
| `surfaceScrim` | rgba(15, 23, 42, 0.32) |
|
|
2133
|
+
| `textFaint` | rgba(38, 32, 68, 0.3) |
|
|
2134
|
+
| `textOnInk` | #FFFFFF |
|
|
2135
|
+
| `textPrimary` | #262044 |
|
|
2136
|
+
| `textSecondary` | rgba(38, 32, 68, 0.68) |
|
|
2137
|
+
| `textTertiary` | rgba(38, 32, 68, 0.45) |
|
|
2138
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2139
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2140
|
+
| `typeSize` | 14 |
|
|
2141
|
+
| `typeWeight` | 600 |
|
|
2142
|
+
|
|
2143
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2144
|
+
|
|
2145
|
+
| Token | Value |
|
|
2146
|
+
| --- | --- |
|
|
2147
|
+
| `borderRadius` | 4 |
|
|
2148
|
+
| `borderRadiusLG` | 6 |
|
|
2149
|
+
| `borderRadiusSM` | 2 |
|
|
2150
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2151
|
+
| `boxShadowSecondary` | none |
|
|
2152
|
+
| `boxShadowTertiary` | none |
|
|
2153
|
+
| `colorBgBase` | #FFFFFF |
|
|
2154
|
+
| `colorBgLayout` | #F2F1FB |
|
|
2155
|
+
| `colorBgMask` | rgba(15, 23, 42, 0.32) |
|
|
2156
|
+
| `colorBgTextActive` | rgba(106, 88, 206, 0.1) |
|
|
2157
|
+
| `colorBorder` | rgba(84, 70, 176, 0.10) |
|
|
2158
|
+
| `colorBorderSecondary` | rgba(106, 88, 206, 0.06) |
|
|
2159
|
+
| `colorError` | #DC2626 |
|
|
2160
|
+
| `colorInfo` | #2563EB |
|
|
2161
|
+
| `colorLink` | #6A58CE |
|
|
2162
|
+
| `colorPrimary` | #6A58CE |
|
|
2163
|
+
| `colorPrimaryTextActive` | #6A58CE |
|
|
2164
|
+
| `colorSplit` | rgba(106, 88, 206, 0.06) |
|
|
2165
|
+
| `colorSuccess` | #16A34A |
|
|
2166
|
+
| `colorTextBase` | #262044 |
|
|
2167
|
+
| `colorTextPlaceholder` | rgba(38, 32, 68, 0.45) |
|
|
2168
|
+
| `colorWarning` | #D97706 |
|
|
2169
|
+
| `controlItemBgActive` | rgba(106, 88, 206, 0.1) |
|
|
2170
|
+
| `controlItemBgActiveHover` | rgba(106, 88, 206, 0.1) |
|
|
2171
|
+
| `controlOutline` | rgba(106, 88, 206, 0.35) |
|
|
2172
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2173
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2174
|
+
| `fontSize` | 14 |
|
|
2175
|
+
| `fontWeightStrong` | 600 |
|
|
2176
|
+
| `lineWidth` | 1 |
|
|
2177
|
+
| `motionBase` | 0 |
|
|
2178
|
+
| `motionDurationSlow` | 280ms |
|
|
2179
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2180
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2181
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2182
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2183
|
+
| `motionUnit` | 0.08 |
|
|
2184
|
+
| `sizeStep` | 4 |
|
|
2185
|
+
| `sizeUnit` | 4 |
|
|
2186
|
+
|
|
2187
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
2188
|
+
|
|
2189
|
+
|
|
2190
|
+
---
|
|
2191
|
+
|
|
2192
|
+
# Theming — Peach pack · beam-dark mode
|
|
2193
|
+
|
|
2194
|
+
> `createPrismTheme({ pack: 'peach', mode: 'dark' })` returns one frozen `PrismTheme`; cssVar key `prism-peach-dark`. antd derives everything not listed through its dark algorithm.
|
|
2195
|
+
|
|
2196
|
+
## Usage
|
|
2197
|
+
|
|
2198
|
+
```ts
|
|
2199
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
2200
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
2201
|
+
|
|
2202
|
+
const theme = createPrismTheme({ pack: 'peach', mode: 'dark' });
|
|
2203
|
+
|
|
2204
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
2205
|
+
```
|
|
2206
|
+
|
|
2207
|
+
## Tier 0 — primitives
|
|
2208
|
+
|
|
2209
|
+
| Token | Value |
|
|
2210
|
+
| --- | --- |
|
|
2211
|
+
| `colorError` | #DC2626 |
|
|
2212
|
+
| `colorGround` | #1D140D |
|
|
2213
|
+
| `colorHairline` | rgba(242, 160, 92, 0.17) |
|
|
2214
|
+
| `colorInfo` | #2563EB |
|
|
2215
|
+
| `colorInk` | #F2A05C |
|
|
2216
|
+
| `colorSuccess` | #16A34A |
|
|
2217
|
+
| `colorText` | #FAF0E4 |
|
|
2218
|
+
| `colorWarning` | #D97706 |
|
|
2219
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2220
|
+
| `motionCurveOpacity` | linear |
|
|
2221
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2222
|
+
| `motionDurationFast` | 80ms |
|
|
2223
|
+
| `motionDurationMid` | 160ms |
|
|
2224
|
+
| `motionDurationSlow` | 280ms |
|
|
2225
|
+
| `shapeRadiusBase` | 4 |
|
|
2226
|
+
| `shapeRadiusLg` | 6 |
|
|
2227
|
+
| `shapeRadiusOuter` | 4 |
|
|
2228
|
+
| `shapeRadiusSm` | 2 |
|
|
2229
|
+
| `spaceStep` | 4 |
|
|
2230
|
+
| `spaceUnit` | 4 |
|
|
2231
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2232
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2233
|
+
| `typeSizeUi` | 14 |
|
|
2234
|
+
| `typeWeightStrong` | 600 |
|
|
2235
|
+
|
|
2236
|
+
## Tier 1 — semantics
|
|
2237
|
+
|
|
2238
|
+
| Token | Value |
|
|
2239
|
+
| --- | --- |
|
|
2240
|
+
| `accentLive` | rgba(242, 160, 92, 0.2) |
|
|
2241
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2242
|
+
| `elevationNone` | none |
|
|
2243
|
+
| `focusRing` | rgba(242, 160, 92, 0.55) |
|
|
2244
|
+
| `hairlineFaint` | rgba(242, 160, 92, 0.1) |
|
|
2245
|
+
| `hairlineStrong` | rgba(242, 160, 92, 0.17) |
|
|
2246
|
+
| `inkPrimary` | #F2A05C |
|
|
2247
|
+
| `motionCurveOpacity` | linear |
|
|
2248
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2249
|
+
| `motionDurationFast` | 80ms |
|
|
2250
|
+
| `motionDurationMid` | 160ms |
|
|
2251
|
+
| `motionDurationSlow` | 280ms |
|
|
2252
|
+
| `shapeRadiusBase` | 4 |
|
|
2253
|
+
| `shapeRadiusLg` | 6 |
|
|
2254
|
+
| `shapeRadiusOuter` | 4 |
|
|
2255
|
+
| `shapeRadiusSm` | 2 |
|
|
2256
|
+
| `spaceStep` | 4 |
|
|
2257
|
+
| `spaceUnit` | 4 |
|
|
2258
|
+
| `stateError` | #DC2626 |
|
|
2259
|
+
| `stateInfo` | #2563EB |
|
|
2260
|
+
| `stateSuccess` | #16A34A |
|
|
2261
|
+
| `stateWarning` | #D97706 |
|
|
2262
|
+
| `surfaceContainer` | #1D140D |
|
|
2263
|
+
| `surfaceGround` | #1D140D |
|
|
2264
|
+
| `surfaceScrim` | rgba(4, 10, 20, 0.72) |
|
|
2265
|
+
| `textFaint` | rgba(250, 240, 228, 0.3) |
|
|
2266
|
+
| `textOnInk` | #0B1220 |
|
|
2267
|
+
| `textPrimary` | #FAF0E4 |
|
|
2268
|
+
| `textSecondary` | rgba(250, 240, 228, 0.68) |
|
|
2269
|
+
| `textTertiary` | rgba(250, 240, 228, 0.45) |
|
|
2270
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2271
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2272
|
+
| `typeSize` | 14 |
|
|
2273
|
+
| `typeWeight` | 600 |
|
|
2274
|
+
|
|
2275
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2276
|
+
|
|
2277
|
+
| Token | Value |
|
|
2278
|
+
| --- | --- |
|
|
2279
|
+
| `borderRadius` | 4 |
|
|
2280
|
+
| `borderRadiusLG` | 6 |
|
|
2281
|
+
| `borderRadiusSM` | 2 |
|
|
2282
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2283
|
+
| `boxShadowSecondary` | none |
|
|
2284
|
+
| `boxShadowTertiary` | none |
|
|
2285
|
+
| `colorBgBase` | #1D140D |
|
|
2286
|
+
| `colorBgMask` | rgba(4, 10, 20, 0.72) |
|
|
2287
|
+
| `colorBgTextActive` | rgba(242, 160, 92, 0.2) |
|
|
2288
|
+
| `colorBorder` | rgba(242, 160, 92, 0.17) |
|
|
2289
|
+
| `colorBorderSecondary` | rgba(242, 160, 92, 0.1) |
|
|
2290
|
+
| `colorError` | #DC2626 |
|
|
2291
|
+
| `colorInfo` | #2563EB |
|
|
2292
|
+
| `colorLink` | #F2A05C |
|
|
2293
|
+
| `colorPrimary` | #F2A05C |
|
|
2294
|
+
| `colorPrimaryTextActive` | #F2A05C |
|
|
2295
|
+
| `colorSplit` | rgba(242, 160, 92, 0.1) |
|
|
2296
|
+
| `colorSuccess` | #16A34A |
|
|
2297
|
+
| `colorTextBase` | #FAF0E4 |
|
|
2298
|
+
| `colorTextPlaceholder` | rgba(250, 240, 228, 0.45) |
|
|
2299
|
+
| `colorWarning` | #D97706 |
|
|
2300
|
+
| `controlItemBgActive` | rgba(242, 160, 92, 0.2) |
|
|
2301
|
+
| `controlItemBgActiveHover` | rgba(242, 160, 92, 0.2) |
|
|
2302
|
+
| `controlOutline` | rgba(242, 160, 92, 0.55) |
|
|
2303
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2304
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2305
|
+
| `fontSize` | 14 |
|
|
2306
|
+
| `fontWeightStrong` | 600 |
|
|
2307
|
+
| `lineWidth` | 1 |
|
|
2308
|
+
| `motionBase` | 0 |
|
|
2309
|
+
| `motionDurationSlow` | 280ms |
|
|
2310
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2311
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2312
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2313
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2314
|
+
| `motionUnit` | 0.08 |
|
|
2315
|
+
| `sizeStep` | 4 |
|
|
2316
|
+
| `sizeUnit` | 4 |
|
|
2317
|
+
|
|
2318
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
2319
|
+
|
|
2320
|
+
|
|
2321
|
+
---
|
|
2322
|
+
|
|
2323
|
+
# Theming — Peach pack · light mode
|
|
2324
|
+
|
|
2325
|
+
> `createPrismTheme({ pack: 'peach', mode: 'light' })` returns one frozen `PrismTheme`; cssVar key `prism-peach-light`. antd derives everything not listed through its default algorithm.
|
|
2326
|
+
|
|
2327
|
+
## Usage
|
|
2328
|
+
|
|
2329
|
+
```ts
|
|
2330
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
2331
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
2332
|
+
|
|
2333
|
+
const theme = createPrismTheme({ pack: 'peach', mode: 'light' });
|
|
2334
|
+
|
|
2335
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
2336
|
+
```
|
|
2337
|
+
|
|
2338
|
+
## Tier 0 — primitives
|
|
2339
|
+
|
|
2340
|
+
| Token | Value |
|
|
2341
|
+
| --- | --- |
|
|
2342
|
+
| `colorError` | #DC2626 |
|
|
2343
|
+
| `colorGround` | #FBF3EA |
|
|
2344
|
+
| `colorHairline` | rgba(146, 62, 24, 0.10) |
|
|
2345
|
+
| `colorInfo` | #2563EB |
|
|
2346
|
+
| `colorInk` | #B04A17 |
|
|
2347
|
+
| `colorSuccess` | #16A34A |
|
|
2348
|
+
| `colorSurface` | #FFFFFF |
|
|
2349
|
+
| `colorText` | #3A241A |
|
|
2350
|
+
| `colorWarning` | #D97706 |
|
|
2351
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2352
|
+
| `motionCurveOpacity` | linear |
|
|
2353
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2354
|
+
| `motionDurationFast` | 80ms |
|
|
2355
|
+
| `motionDurationMid` | 160ms |
|
|
2356
|
+
| `motionDurationSlow` | 280ms |
|
|
2357
|
+
| `shapeRadiusBase` | 4 |
|
|
2358
|
+
| `shapeRadiusLg` | 6 |
|
|
2359
|
+
| `shapeRadiusOuter` | 4 |
|
|
2360
|
+
| `shapeRadiusSm` | 2 |
|
|
2361
|
+
| `spaceStep` | 4 |
|
|
2362
|
+
| `spaceUnit` | 4 |
|
|
2363
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2364
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2365
|
+
| `typeSizeUi` | 14 |
|
|
2366
|
+
| `typeWeightStrong` | 600 |
|
|
2367
|
+
|
|
2368
|
+
## Tier 1 — semantics
|
|
2369
|
+
|
|
2370
|
+
| Token | Value |
|
|
2371
|
+
| --- | --- |
|
|
2372
|
+
| `accentLive` | rgba(176, 74, 23, 0.1) |
|
|
2373
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2374
|
+
| `elevationNone` | none |
|
|
2375
|
+
| `focusRing` | rgba(176, 74, 23, 0.35) |
|
|
2376
|
+
| `hairlineFaint` | rgba(176, 74, 23, 0.06) |
|
|
2377
|
+
| `hairlineStrong` | rgba(146, 62, 24, 0.10) |
|
|
2378
|
+
| `inkPrimary` | #B04A17 |
|
|
2379
|
+
| `motionCurveOpacity` | linear |
|
|
2380
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2381
|
+
| `motionDurationFast` | 80ms |
|
|
2382
|
+
| `motionDurationMid` | 160ms |
|
|
2383
|
+
| `motionDurationSlow` | 280ms |
|
|
2384
|
+
| `shapeRadiusBase` | 4 |
|
|
2385
|
+
| `shapeRadiusLg` | 6 |
|
|
2386
|
+
| `shapeRadiusOuter` | 4 |
|
|
2387
|
+
| `shapeRadiusSm` | 2 |
|
|
2388
|
+
| `spaceStep` | 4 |
|
|
2389
|
+
| `spaceUnit` | 4 |
|
|
2390
|
+
| `stateError` | #DC2626 |
|
|
2391
|
+
| `stateInfo` | #2563EB |
|
|
2392
|
+
| `stateSuccess` | #16A34A |
|
|
2393
|
+
| `stateWarning` | #D97706 |
|
|
2394
|
+
| `surfaceContainer` | #FFFFFF |
|
|
2395
|
+
| `surfaceGround` | #FBF3EA |
|
|
2396
|
+
| `surfaceScrim` | rgba(15, 23, 42, 0.32) |
|
|
2397
|
+
| `textFaint` | rgba(58, 36, 26, 0.3) |
|
|
2398
|
+
| `textOnInk` | #FFFFFF |
|
|
2399
|
+
| `textPrimary` | #3A241A |
|
|
2400
|
+
| `textSecondary` | rgba(58, 36, 26, 0.68) |
|
|
2401
|
+
| `textTertiary` | rgba(58, 36, 26, 0.45) |
|
|
2402
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2403
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2404
|
+
| `typeSize` | 14 |
|
|
2405
|
+
| `typeWeight` | 600 |
|
|
2406
|
+
|
|
2407
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2408
|
+
|
|
2409
|
+
| Token | Value |
|
|
2410
|
+
| --- | --- |
|
|
2411
|
+
| `borderRadius` | 4 |
|
|
2412
|
+
| `borderRadiusLG` | 6 |
|
|
2413
|
+
| `borderRadiusSM` | 2 |
|
|
2414
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2415
|
+
| `boxShadowSecondary` | none |
|
|
2416
|
+
| `boxShadowTertiary` | none |
|
|
2417
|
+
| `colorBgBase` | #FFFFFF |
|
|
2418
|
+
| `colorBgLayout` | #FBF3EA |
|
|
2419
|
+
| `colorBgMask` | rgba(15, 23, 42, 0.32) |
|
|
2420
|
+
| `colorBgTextActive` | rgba(176, 74, 23, 0.1) |
|
|
2421
|
+
| `colorBorder` | rgba(146, 62, 24, 0.10) |
|
|
2422
|
+
| `colorBorderSecondary` | rgba(176, 74, 23, 0.06) |
|
|
2423
|
+
| `colorError` | #DC2626 |
|
|
2424
|
+
| `colorInfo` | #2563EB |
|
|
2425
|
+
| `colorLink` | #B04A17 |
|
|
2426
|
+
| `colorPrimary` | #B04A17 |
|
|
2427
|
+
| `colorPrimaryTextActive` | #B04A17 |
|
|
2428
|
+
| `colorSplit` | rgba(176, 74, 23, 0.06) |
|
|
2429
|
+
| `colorSuccess` | #16A34A |
|
|
2430
|
+
| `colorTextBase` | #3A241A |
|
|
2431
|
+
| `colorTextPlaceholder` | rgba(58, 36, 26, 0.45) |
|
|
2432
|
+
| `colorWarning` | #D97706 |
|
|
2433
|
+
| `controlItemBgActive` | rgba(176, 74, 23, 0.1) |
|
|
2434
|
+
| `controlItemBgActiveHover` | rgba(176, 74, 23, 0.1) |
|
|
2435
|
+
| `controlOutline` | rgba(176, 74, 23, 0.35) |
|
|
2436
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2437
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2438
|
+
| `fontSize` | 14 |
|
|
2439
|
+
| `fontWeightStrong` | 600 |
|
|
2440
|
+
| `lineWidth` | 1 |
|
|
2441
|
+
| `motionBase` | 0 |
|
|
2442
|
+
| `motionDurationSlow` | 280ms |
|
|
2443
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2444
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2445
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2446
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2447
|
+
| `motionUnit` | 0.08 |
|
|
2448
|
+
| `sizeStep` | 4 |
|
|
2449
|
+
| `sizeUnit` | 4 |
|
|
2450
|
+
|
|
2451
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
2452
|
+
|
|
2453
|
+
|
|
2454
|
+
---
|
|
2455
|
+
|
|
2456
|
+
# Theming — Rose pack · beam-dark mode
|
|
2457
|
+
|
|
2458
|
+
> `createPrismTheme({ pack: 'rose', mode: 'dark' })` returns one frozen `PrismTheme`; cssVar key `prism-rose-dark`. antd derives everything not listed through its dark algorithm.
|
|
2459
|
+
|
|
2460
|
+
## Usage
|
|
2461
|
+
|
|
2462
|
+
```ts
|
|
2463
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
2464
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
2465
|
+
|
|
2466
|
+
const theme = createPrismTheme({ pack: 'rose', mode: 'dark' });
|
|
2467
|
+
|
|
2468
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
2469
|
+
```
|
|
2470
|
+
|
|
2471
|
+
## Tier 0 — primitives
|
|
2472
|
+
|
|
2473
|
+
| Token | Value |
|
|
2474
|
+
| --- | --- |
|
|
2475
|
+
| `colorError` | #DC2626 |
|
|
2476
|
+
| `colorGround` | #1A111C |
|
|
2477
|
+
| `colorHairline` | rgba(240, 140, 180, 0.17) |
|
|
2478
|
+
| `colorInfo` | #2563EB |
|
|
2479
|
+
| `colorInk` | #F08CB4 |
|
|
2480
|
+
| `colorSuccess` | #16A34A |
|
|
2481
|
+
| `colorText` | #F9EAF1 |
|
|
2482
|
+
| `colorWarning` | #D97706 |
|
|
2483
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2484
|
+
| `motionCurveOpacity` | linear |
|
|
2485
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2486
|
+
| `motionDurationFast` | 80ms |
|
|
2487
|
+
| `motionDurationMid` | 160ms |
|
|
2488
|
+
| `motionDurationSlow` | 280ms |
|
|
2489
|
+
| `shapeRadiusBase` | 4 |
|
|
2490
|
+
| `shapeRadiusLg` | 6 |
|
|
2491
|
+
| `shapeRadiusOuter` | 4 |
|
|
2492
|
+
| `shapeRadiusSm` | 2 |
|
|
2493
|
+
| `spaceStep` | 4 |
|
|
2494
|
+
| `spaceUnit` | 4 |
|
|
2495
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2496
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2497
|
+
| `typeSizeUi` | 14 |
|
|
2498
|
+
| `typeWeightStrong` | 600 |
|
|
2499
|
+
|
|
2500
|
+
## Tier 1 — semantics
|
|
2501
|
+
|
|
2502
|
+
| Token | Value |
|
|
2503
|
+
| --- | --- |
|
|
2504
|
+
| `accentLive` | rgba(240, 140, 180, 0.2) |
|
|
2505
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2506
|
+
| `elevationNone` | none |
|
|
2507
|
+
| `focusRing` | rgba(240, 140, 180, 0.55) |
|
|
2508
|
+
| `hairlineFaint` | rgba(240, 140, 180, 0.1) |
|
|
2509
|
+
| `hairlineStrong` | rgba(240, 140, 180, 0.17) |
|
|
2510
|
+
| `inkPrimary` | #F08CB4 |
|
|
2511
|
+
| `motionCurveOpacity` | linear |
|
|
2512
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2513
|
+
| `motionDurationFast` | 80ms |
|
|
2514
|
+
| `motionDurationMid` | 160ms |
|
|
2515
|
+
| `motionDurationSlow` | 280ms |
|
|
2516
|
+
| `shapeRadiusBase` | 4 |
|
|
2517
|
+
| `shapeRadiusLg` | 6 |
|
|
2518
|
+
| `shapeRadiusOuter` | 4 |
|
|
2519
|
+
| `shapeRadiusSm` | 2 |
|
|
2520
|
+
| `spaceStep` | 4 |
|
|
2521
|
+
| `spaceUnit` | 4 |
|
|
2522
|
+
| `stateError` | #DC2626 |
|
|
2523
|
+
| `stateInfo` | #2563EB |
|
|
2524
|
+
| `stateSuccess` | #16A34A |
|
|
2525
|
+
| `stateWarning` | #D97706 |
|
|
2526
|
+
| `surfaceContainer` | #1A111C |
|
|
2527
|
+
| `surfaceGround` | #1A111C |
|
|
2528
|
+
| `surfaceScrim` | rgba(4, 10, 20, 0.72) |
|
|
2529
|
+
| `textFaint` | rgba(249, 234, 241, 0.3) |
|
|
2530
|
+
| `textOnInk` | #0B1220 |
|
|
2531
|
+
| `textPrimary` | #F9EAF1 |
|
|
2532
|
+
| `textSecondary` | rgba(249, 234, 241, 0.68) |
|
|
2533
|
+
| `textTertiary` | rgba(249, 234, 241, 0.45) |
|
|
2534
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2535
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2536
|
+
| `typeSize` | 14 |
|
|
2537
|
+
| `typeWeight` | 600 |
|
|
2538
|
+
|
|
2539
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2540
|
+
|
|
2541
|
+
| Token | Value |
|
|
2542
|
+
| --- | --- |
|
|
2543
|
+
| `borderRadius` | 4 |
|
|
2544
|
+
| `borderRadiusLG` | 6 |
|
|
2545
|
+
| `borderRadiusSM` | 2 |
|
|
2546
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.24) |
|
|
2547
|
+
| `boxShadowSecondary` | none |
|
|
2548
|
+
| `boxShadowTertiary` | none |
|
|
2549
|
+
| `colorBgBase` | #1A111C |
|
|
2550
|
+
| `colorBgMask` | rgba(4, 10, 20, 0.72) |
|
|
2551
|
+
| `colorBgTextActive` | rgba(240, 140, 180, 0.2) |
|
|
2552
|
+
| `colorBorder` | rgba(240, 140, 180, 0.17) |
|
|
2553
|
+
| `colorBorderSecondary` | rgba(240, 140, 180, 0.1) |
|
|
2554
|
+
| `colorError` | #DC2626 |
|
|
2555
|
+
| `colorInfo` | #2563EB |
|
|
2556
|
+
| `colorLink` | #F08CB4 |
|
|
2557
|
+
| `colorPrimary` | #F08CB4 |
|
|
2558
|
+
| `colorPrimaryTextActive` | #F08CB4 |
|
|
2559
|
+
| `colorSplit` | rgba(240, 140, 180, 0.1) |
|
|
2560
|
+
| `colorSuccess` | #16A34A |
|
|
2561
|
+
| `colorTextBase` | #F9EAF1 |
|
|
2562
|
+
| `colorTextPlaceholder` | rgba(249, 234, 241, 0.45) |
|
|
2563
|
+
| `colorWarning` | #D97706 |
|
|
2564
|
+
| `controlItemBgActive` | rgba(240, 140, 180, 0.2) |
|
|
2565
|
+
| `controlItemBgActiveHover` | rgba(240, 140, 180, 0.2) |
|
|
2566
|
+
| `controlOutline` | rgba(240, 140, 180, 0.55) |
|
|
2567
|
+
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2568
|
+
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2569
|
+
| `fontSize` | 14 |
|
|
2570
|
+
| `fontWeightStrong` | 600 |
|
|
2571
|
+
| `lineWidth` | 1 |
|
|
2572
|
+
| `motionBase` | 0 |
|
|
2573
|
+
| `motionDurationSlow` | 280ms |
|
|
2574
|
+
| `motionEaseInOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2575
|
+
| `motionEaseOut` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2576
|
+
| `motionEaseOutCirc` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2577
|
+
| `motionEaseOutQuint` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2578
|
+
| `motionUnit` | 0.08 |
|
|
2579
|
+
| `sizeStep` | 4 |
|
|
2580
|
+
| `sizeUnit` | 4 |
|
|
2581
|
+
|
|
2582
|
+
Component overrides are shadow-zeroing only (Button/Input shadows → `none`, always with `algorithm: true`).
|
|
2583
|
+
|
|
2584
|
+
|
|
2585
|
+
---
|
|
2586
|
+
|
|
2587
|
+
# Theming — Rose pack · light mode
|
|
2588
|
+
|
|
2589
|
+
> `createPrismTheme({ pack: 'rose', mode: 'light' })` returns one frozen `PrismTheme`; cssVar key `prism-rose-light`. antd derives everything not listed through its default algorithm.
|
|
2590
|
+
|
|
2591
|
+
## Usage
|
|
2592
|
+
|
|
2593
|
+
```ts
|
|
2594
|
+
import { createPrismTheme } from '@nanisoft/prism-tokens';
|
|
2595
|
+
import { PrismProvider } from '@nanisoft/prism-ui';
|
|
2596
|
+
|
|
2597
|
+
const theme = createPrismTheme({ pack: 'rose', mode: 'light' });
|
|
2598
|
+
|
|
2599
|
+
// <PrismProvider prismTheme={theme}>…</PrismProvider>
|
|
2600
|
+
```
|
|
2601
|
+
|
|
2602
|
+
## Tier 0 — primitives
|
|
2603
|
+
|
|
2604
|
+
| Token | Value |
|
|
2605
|
+
| --- | --- |
|
|
2606
|
+
| `colorError` | #DC2626 |
|
|
2607
|
+
| `colorGround` | #FBF1F5 |
|
|
2608
|
+
| `colorHairline` | rgba(150, 48, 92, 0.10) |
|
|
2609
|
+
| `colorInfo` | #2563EB |
|
|
2610
|
+
| `colorInk` | #BC3A6C |
|
|
2611
|
+
| `colorSuccess` | #16A34A |
|
|
2612
|
+
| `colorSurface` | #FFFFFF |
|
|
2613
|
+
| `colorText` | #331B29 |
|
|
2614
|
+
| `colorWarning` | #D97706 |
|
|
2615
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2616
|
+
| `motionCurveOpacity` | linear |
|
|
2617
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2618
|
+
| `motionDurationFast` | 80ms |
|
|
2619
|
+
| `motionDurationMid` | 160ms |
|
|
2620
|
+
| `motionDurationSlow` | 280ms |
|
|
2621
|
+
| `shapeRadiusBase` | 4 |
|
|
2622
|
+
| `shapeRadiusLg` | 6 |
|
|
2623
|
+
| `shapeRadiusOuter` | 4 |
|
|
2624
|
+
| `shapeRadiusSm` | 2 |
|
|
2625
|
+
| `spaceStep` | 4 |
|
|
2626
|
+
| `spaceUnit` | 4 |
|
|
2627
|
+
| `typeFamilyMono` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2628
|
+
| `typeFamilyUi` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2629
|
+
| `typeSizeUi` | 14 |
|
|
2630
|
+
| `typeWeightStrong` | 600 |
|
|
2631
|
+
|
|
2632
|
+
## Tier 1 — semantics
|
|
2633
|
+
|
|
2634
|
+
| Token | Value |
|
|
2635
|
+
| --- | --- |
|
|
2636
|
+
| `accentLive` | rgba(188, 58, 108, 0.1) |
|
|
2637
|
+
| `elevationFloating` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2638
|
+
| `elevationNone` | none |
|
|
2639
|
+
| `focusRing` | rgba(188, 58, 108, 0.35) |
|
|
2640
|
+
| `hairlineFaint` | rgba(188, 58, 108, 0.06) |
|
|
2641
|
+
| `hairlineStrong` | rgba(150, 48, 92, 0.10) |
|
|
2642
|
+
| `inkPrimary` | #BC3A6C |
|
|
2643
|
+
| `motionCurveOpacity` | linear |
|
|
2644
|
+
| `motionCurveStandard` | cubic-bezier(0.25, 1, 0.5, 1) |
|
|
2645
|
+
| `motionDurationFast` | 80ms |
|
|
2646
|
+
| `motionDurationMid` | 160ms |
|
|
2647
|
+
| `motionDurationSlow` | 280ms |
|
|
2648
|
+
| `shapeRadiusBase` | 4 |
|
|
2649
|
+
| `shapeRadiusLg` | 6 |
|
|
2650
|
+
| `shapeRadiusOuter` | 4 |
|
|
2651
|
+
| `shapeRadiusSm` | 2 |
|
|
2652
|
+
| `spaceStep` | 4 |
|
|
2653
|
+
| `spaceUnit` | 4 |
|
|
2654
|
+
| `stateError` | #DC2626 |
|
|
2655
|
+
| `stateInfo` | #2563EB |
|
|
2656
|
+
| `stateSuccess` | #16A34A |
|
|
2657
|
+
| `stateWarning` | #D97706 |
|
|
2658
|
+
| `surfaceContainer` | #FFFFFF |
|
|
2659
|
+
| `surfaceGround` | #FBF1F5 |
|
|
2660
|
+
| `surfaceScrim` | rgba(15, 23, 42, 0.32) |
|
|
2661
|
+
| `textFaint` | rgba(51, 27, 41, 0.3) |
|
|
2662
|
+
| `textOnInk` | #FFFFFF |
|
|
2663
|
+
| `textPrimary` | #331B29 |
|
|
2664
|
+
| `textSecondary` | rgba(51, 27, 41, 0.68) |
|
|
2665
|
+
| `textTertiary` | rgba(51, 27, 41, 0.45) |
|
|
2666
|
+
| `typeFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
2667
|
+
| `typeFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
2668
|
+
| `typeSize` | 14 |
|
|
2669
|
+
| `typeWeight` | 600 |
|
|
2670
|
+
|
|
2671
|
+
## antd token lane (seeds + the closed map-token allowlist)
|
|
2672
|
+
|
|
2673
|
+
| Token | Value |
|
|
2674
|
+
| --- | --- |
|
|
2675
|
+
| `borderRadius` | 4 |
|
|
2676
|
+
| `borderRadiusLG` | 6 |
|
|
2677
|
+
| `borderRadiusSM` | 2 |
|
|
2678
|
+
| `boxShadow` | 0 4px 16px 0 rgba(11, 18, 32, 0.16) |
|
|
2679
|
+
| `boxShadowSecondary` | none |
|
|
2680
|
+
| `boxShadowTertiary` | none |
|
|
2681
|
+
| `colorBgBase` | #FFFFFF |
|
|
2682
|
+
| `colorBgLayout` | #FBF1F5 |
|
|
2683
|
+
| `colorBgMask` | rgba(15, 23, 42, 0.32) |
|
|
2684
|
+
| `colorBgTextActive` | rgba(188, 58, 108, 0.1) |
|
|
2685
|
+
| `colorBorder` | rgba(150, 48, 92, 0.10) |
|
|
2686
|
+
| `colorBorderSecondary` | rgba(188, 58, 108, 0.06) |
|
|
2687
|
+
| `colorError` | #DC2626 |
|
|
2688
|
+
| `colorInfo` | #2563EB |
|
|
2689
|
+
| `colorLink` | #BC3A6C |
|
|
2690
|
+
| `colorPrimary` | #BC3A6C |
|
|
2691
|
+
| `colorPrimaryTextActive` | #BC3A6C |
|
|
2692
|
+
| `colorSplit` | rgba(188, 58, 108, 0.06) |
|
|
2693
|
+
| `colorSuccess` | #16A34A |
|
|
2694
|
+
| `colorTextBase` | #331B29 |
|
|
2695
|
+
| `colorTextPlaceholder` | rgba(51, 27, 41, 0.45) |
|
|
1856
2696
|
| `colorWarning` | #D97706 |
|
|
1857
|
-
| `controlItemBgActive` | rgba(
|
|
1858
|
-
| `controlItemBgActiveHover` | rgba(
|
|
1859
|
-
| `controlOutline` | rgba(
|
|
2697
|
+
| `controlItemBgActive` | rgba(188, 58, 108, 0.1) |
|
|
2698
|
+
| `controlItemBgActiveHover` | rgba(188, 58, 108, 0.1) |
|
|
2699
|
+
| `controlOutline` | rgba(188, 58, 108, 0.35) |
|
|
1860
2700
|
| `fontFamily` | "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
|
1861
2701
|
| `fontFamilyCode` | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
|
1862
2702
|
| `fontSize` | 14 |
|