@fangxinyan/lumina 0.6.3 → 0.6.5
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/{Alert-QBKIDY5H.css → Alert-HVPI6L4V.css} +2 -2
- package/dist/Alert.cjs +3 -3
- package/dist/Alert.js +2 -2
- package/dist/{AppShell-RCALXUCZ.css → AppShell-FZCD4C56.css} +4 -4
- package/dist/AppShell.cjs +5 -5
- package/dist/AppShell.js +1 -1
- package/dist/{AutoComplete-P5KZMZO5.css → AutoComplete-4YZBMW4E.css} +2 -2
- package/dist/AutoComplete.cjs +5 -5
- package/dist/AutoComplete.js +4 -4
- package/dist/{Avatar-R5A4AFKZ.css → Avatar-TNPOHVY5.css} +1 -1
- package/dist/Avatar.cjs +2 -2
- package/dist/Avatar.js +1 -1
- package/dist/Badge.cjs +2 -2
- package/dist/Badge.js +1 -1
- package/dist/{Button-4Z3Q6KII.css → Button-TUMZUQLI.css} +11 -11
- package/dist/Button.cjs +3 -3
- package/dist/Button.js +2 -2
- package/dist/{Calendar-LHZELUDL.css → Calendar-RUTPKREW.css} +4 -4
- package/dist/Calendar.cjs +3 -3
- package/dist/Calendar.js +2 -2
- package/dist/{Card-6RMVIHWX.css → Card-MA6SV7D5.css} +6 -6
- package/dist/Card.cjs +2 -2
- package/dist/Card.js +1 -1
- package/dist/{Cascader-3BLLA7EN.css → Cascader-ANEQUPMI.css} +8 -8
- package/dist/Cascader.cjs +5 -5
- package/dist/Cascader.js +4 -4
- package/dist/{Checkbox-U5EUDSYS.css → Checkbox-EDNPZRIP.css} +3 -3
- package/dist/Checkbox.cjs +3 -3
- package/dist/Checkbox.js +2 -2
- package/dist/{Collapse-66U5YJFY.css → Collapse-UNBHEPYP.css} +2 -2
- package/dist/Collapse.cjs +3 -3
- package/dist/Collapse.js +2 -2
- package/dist/{ColorPicker-SDDQGHCM.css → ColorPicker-LPG6QPYF.css} +7 -7
- package/dist/ColorPicker.cjs +2 -2
- package/dist/ColorPicker.js +1 -1
- package/dist/{CommandPalette-T45DBMPY.css → CommandPalette-RTKWNH2D.css} +3 -3
- package/dist/CommandPalette.cjs +5 -5
- package/dist/CommandPalette.js +4 -4
- package/dist/{ContextMenu-FKW6CQW4.css → ContextMenu-WRR2SSWL.css} +3 -3
- package/dist/ContextMenu.cjs +2 -2
- package/dist/ContextMenu.js +1 -1
- package/dist/{Divider-OEE4Q2KS.css → Divider-RPQCVH3J.css} +2 -2
- package/dist/Divider.cjs +2 -2
- package/dist/Divider.js +1 -1
- package/dist/{Drawer-IPGB4CXH.css → Drawer-7N3URAJ6.css} +8 -5
- package/dist/Drawer.cjs +3 -3
- package/dist/Drawer.js +2 -2
- package/dist/{Empty-DC2LPORC.css → Empty-CZTRZMZQ.css} +1 -1
- package/dist/Empty.cjs +2 -2
- package/dist/Empty.js +1 -1
- package/dist/{Form-5GRVZNDO.css → Form-NGCQWTMZ.css} +1 -1
- package/dist/Form.cjs +4 -4
- package/dist/Form.js +1 -1
- package/dist/Icon.cjs +49 -49
- package/dist/Icon.js +1 -1
- package/dist/{Image-MRYQCRQ5.css → Image-SGSRTHQX.css} +5 -5
- package/dist/Image.cjs +6 -6
- package/dist/Image.js +2 -2
- package/dist/{Input-HUBJ55OH.css → Input-7GDPGP3E.css} +12 -12
- package/dist/Input.cjs +5 -5
- package/dist/Input.js +3 -3
- package/dist/InputNumber.cjs +5 -5
- package/dist/InputNumber.js +4 -4
- package/dist/{List-W5BW4D2P.css → List-LSMU5QAC.css} +3 -3
- package/dist/List.cjs +2 -2
- package/dist/List.js +1 -1
- package/dist/{Message-2MZ3LFPU.css → Message-H222YGR6.css} +1 -1
- package/dist/Message.cjs +6 -6
- package/dist/Message.js +2 -2
- package/dist/{Modal-2QNDW4SO.css → Modal-MCFDYVUQ.css} +3 -3
- package/dist/Modal.cjs +4 -4
- package/dist/Modal.js +3 -3
- package/dist/{Pagination-YIRYJUXP.css → Pagination-YSZSNFHG.css} +5 -5
- package/dist/Pagination.cjs +7 -7
- package/dist/Pagination.js +6 -6
- package/dist/{Popover-DVGQGWX6.css → Popover-Y3LDCJPW.css} +1 -1
- package/dist/Popover.cjs +2 -2
- package/dist/Popover.js +1 -1
- package/dist/{Progress-CHV7DN6Y.css → Progress-CZNXCYGW.css} +1 -1
- package/dist/Progress.cjs +2 -2
- package/dist/Progress.js +1 -1
- package/dist/{Radio-GVFDPAZM.css → Radio-IQKASYDF.css} +4 -4
- package/dist/Radio.cjs +3 -3
- package/dist/Radio.js +1 -1
- package/dist/{Select-Z5VYPEEY.css → Select-YZ2NUJSX.css} +18 -18
- package/dist/Select.cjs +6 -6
- package/dist/Select.js +5 -5
- package/dist/Skeleton.cjs +2 -2
- package/dist/Skeleton.js +1 -1
- package/dist/{Slider-3JKA5EW6.css → Slider-UM2IZZBH.css} +7 -7
- package/dist/Slider.cjs +2 -2
- package/dist/Slider.js +1 -1
- package/dist/{Spin-3GJNMSIH.css → Spin-GONGPV4Q.css} +1 -1
- package/dist/Spin.cjs +2 -2
- package/dist/Spin.js +1 -1
- package/dist/Splitter.cjs +2 -2
- package/dist/Splitter.js +1 -1
- package/dist/{StatusBar-CDS2GPSI.css → StatusBar-FJKEEPXU.css} +3 -7
- package/dist/StatusBar.cjs +3 -3
- package/dist/StatusBar.js +1 -1
- package/dist/Surface-UDDN3DGL.css +42 -0
- package/dist/Surface.cjs +16 -0
- package/dist/Surface.d.cts +60 -0
- package/dist/Surface.d.ts +60 -0
- package/dist/Surface.js +3 -0
- package/dist/{Switch-36KJNDXM.css → Switch-COAQIOMH.css} +8 -5
- package/dist/Switch.cjs +2 -2
- package/dist/Switch.js +1 -1
- package/dist/{Table-ATJJQLKU.css → Table-IYJTPY6J.css} +16 -16
- package/dist/Table.cjs +9 -9
- package/dist/Table.js +8 -8
- package/dist/{TablePro-3XVHYLSL.css → TablePro-JRSBPXB5.css} +1 -1
- package/dist/TablePro.cjs +10 -10
- package/dist/TablePro.js +9 -9
- package/dist/{Tabs-BLSNI2T5.css → Tabs-X5U5PCPV.css} +2 -2
- package/dist/Tabs.cjs +2 -2
- package/dist/Tabs.js +1 -1
- package/dist/{Tag-HDYCDPFS.css → Tag-G2XWAL7A.css} +1 -1
- package/dist/Tag.cjs +3 -3
- package/dist/Tag.js +2 -2
- package/dist/{Textarea-YNET7IBH.css → Textarea-YHWKHIFE.css} +3 -3
- package/dist/Textarea.cjs +4 -4
- package/dist/Textarea.js +2 -2
- package/dist/Theme.cjs +11 -11
- package/dist/Theme.d.cts +5 -1
- package/dist/Theme.d.ts +5 -1
- package/dist/Theme.js +1 -1
- package/dist/ThemePanel-76LB3YA5.css +509 -0
- package/dist/ThemePanel.cjs +29 -0
- package/dist/ThemePanel.d.cts +80 -0
- package/dist/ThemePanel.d.ts +80 -0
- package/dist/ThemePanel.js +12 -0
- package/dist/{Timeline-3ZHOHPXT.css → Timeline-ZIM7QFQC.css} +1 -1
- package/dist/Timeline.cjs +3 -3
- package/dist/Timeline.js +2 -2
- package/dist/{Tooltip-DMKUPC24.css → Tooltip-5FSPJWLX.css} +4 -2
- package/dist/Tooltip.cjs +2 -2
- package/dist/Tooltip.d.cts +2 -0
- package/dist/Tooltip.d.ts +2 -0
- package/dist/Tooltip.js +1 -1
- package/dist/{Typography-NKPWTJCV.css → Typography-32QQLD4F.css} +41 -11
- package/dist/Typography.cjs +8 -7
- package/dist/Typography.d.cts +1 -1
- package/dist/Typography.d.ts +1 -1
- package/dist/Typography.js +3 -2
- package/dist/{chunk-DWAN57G4.js → chunk-2NT5QKEX.js} +3 -3
- package/dist/{chunk-6BWELOCT.js → chunk-2SCXQ7QS.js} +2 -2
- package/dist/{chunk-TP567B3L.cjs → chunk-2ZADGBUN.cjs} +5 -5
- package/dist/{chunk-CETNCRZ4.js → chunk-2ZFJTMEF.js} +4 -4
- package/dist/{chunk-I5WTQ5Y3.js → chunk-3YP7CBJT.js} +3 -3
- package/dist/{chunk-UUHFKIWP.cjs → chunk-4UKM4KAC.cjs} +2 -2
- package/dist/{chunk-HLFH5HWR.js → chunk-56PHETWO.js} +3 -3
- package/dist/{chunk-ET6DYQVZ.js → chunk-5JNDDWFZ.js} +132 -14
- package/dist/{chunk-MPVCYU2K.cjs → chunk-5NFSDFBB.cjs} +4 -4
- package/dist/{chunk-P6P4DGLF.cjs → chunk-66GXZQKL.cjs} +4 -4
- package/dist/{chunk-QP3VCSRY.cjs → chunk-66T76GII.cjs} +6 -6
- package/dist/chunk-6EOSMK34.cjs +194 -0
- package/dist/{chunk-WNM5RVXR.cjs → chunk-6GQPF3EI.cjs} +2 -2
- package/dist/{chunk-V272XR3F.cjs → chunk-6LARTGLP.cjs} +1 -1
- package/dist/chunk-6SPMHY54.js +191 -0
- package/dist/{chunk-YLIQ37KY.cjs → chunk-6XVLERA3.cjs} +2 -2
- package/dist/{chunk-FBYUZOZP.js → chunk-7D76MI37.js} +5 -5
- package/dist/{chunk-J5ZGYQZK.js → chunk-7NZ2A4MA.js} +155 -29
- package/dist/{chunk-KLEKKZ73.js → chunk-7ZNGHWVS.js} +1 -1
- package/dist/{chunk-7AG524YZ.cjs → chunk-ACQSRMLF.cjs} +5 -5
- package/dist/{chunk-JVUVOR6S.js → chunk-AJH2O4WC.js} +3 -3
- package/dist/{chunk-NTS5L4NQ.cjs → chunk-BJ6WUVEG.cjs} +4 -4
- package/dist/{chunk-S3VXH5L4.cjs → chunk-C24W6PTJ.cjs} +2 -2
- package/dist/{chunk-GMN74OEY.cjs → chunk-CBKJXKVI.cjs} +2 -2
- package/dist/{chunk-FWPBORRB.js → chunk-CEZ2DR4R.js} +3 -3
- package/dist/{chunk-SQGPSMSK.js → chunk-CNGKJYGZ.js} +3 -3
- package/dist/{chunk-PULGVK2I.cjs → chunk-D5PCIVID.cjs} +4 -4
- package/dist/{chunk-DG5VQ6BO.cjs → chunk-D64IPDUE.cjs} +4 -4
- package/dist/{chunk-VFFIE2VO.cjs → chunk-DYHNOYRC.cjs} +7 -7
- package/dist/{chunk-P6EZG2R7.cjs → chunk-DYSGXQUK.cjs} +7 -7
- package/dist/{chunk-H4LGWZMH.cjs → chunk-GBKUGKIY.cjs} +11 -11
- package/dist/{chunk-J2HZTJO6.js → chunk-GUZ2DNDC.js} +3 -3
- package/dist/{chunk-K6F25JXT.js → chunk-GZCU6HXD.js} +2 -2
- package/dist/{chunk-USQ43DJ5.js → chunk-HFUHQUPQ.js} +2 -2
- package/dist/{chunk-7JN6FJ55.js → chunk-HU7T64Y3.js} +2 -2
- package/dist/{chunk-X5GCOMC3.cjs → chunk-IDJCFYPP.cjs} +15 -15
- package/dist/{chunk-KD4YYIIO.cjs → chunk-IHK2FRTS.cjs} +2 -2
- package/dist/{chunk-Q5SZIU7Z.cjs → chunk-JFQ53MO4.cjs} +1 -1
- package/dist/{chunk-7PQJCLIR.js → chunk-KMG7OMOS.js} +2 -2
- package/dist/{chunk-2HQCUBA7.cjs → chunk-L27C5O4W.cjs} +4 -4
- package/dist/chunk-LFTCK2VM.cjs +1194 -0
- package/dist/{chunk-BVQ77VRY.js → chunk-LI4XJTEA.js} +3 -3
- package/dist/{chunk-45VJGBGN.js → chunk-LQLOOUS3.js} +2 -2
- package/dist/{chunk-PL6DRFUO.cjs → chunk-MOMLQP7B.cjs} +2 -2
- package/dist/{chunk-OF7JIYBY.cjs → chunk-MYHBC3HA.cjs} +2 -2
- package/dist/{chunk-LKK2AA7W.js → chunk-MYRLCN6V.js} +2 -2
- package/dist/{chunk-ZKE73UQF.cjs → chunk-N2BTMKF2.cjs} +5 -5
- package/dist/{chunk-6ZXQJRAT.cjs → chunk-N2COYOXE.cjs} +155 -29
- package/dist/{chunk-2TL37AP5.cjs → chunk-N3OLFKV5.cjs} +1 -1
- package/dist/{chunk-5JSDQ6QQ.cjs → chunk-NDO22RER.cjs} +2 -2
- package/dist/{chunk-ME5BZ2WA.js → chunk-NE7IUGMK.js} +3 -3
- package/dist/{chunk-F6RYCBQG.js → chunk-NFXHIO3G.js} +1 -1
- package/dist/chunk-NJCHFXGC.js +1170 -0
- package/dist/chunk-NT6CJYI3.cjs +129 -0
- package/dist/chunk-O43DOE7V.js +106 -0
- package/dist/{chunk-GNEZD7KE.cjs → chunk-O4BOBOYV.cjs} +2 -2
- package/dist/{chunk-XSN4TLN5.cjs → chunk-OGPDCBPD.cjs} +12 -12
- package/dist/{chunk-6YQTMI55.js → chunk-OHFZ7L4T.js} +2 -2
- package/dist/{chunk-7IYKKLV3.js → chunk-OHIFKN4E.js} +4 -4
- package/dist/{chunk-46VXFTEC.js → chunk-OQU3TJCF.js} +3 -3
- package/dist/{chunk-5TKC6IEN.js → chunk-PEJLXJQD.js} +1 -1
- package/dist/{chunk-HWFM4MAT.js → chunk-PKHITACT.js} +2 -2
- package/dist/{chunk-JCEHZ336.js → chunk-PNZJFLMY.js} +3 -3
- package/dist/{chunk-XRR3CYQL.js → chunk-QP7RXZES.js} +2 -2
- package/dist/{chunk-5MN3PMF4.cjs → chunk-QY76WTO5.cjs} +9 -9
- package/dist/{chunk-FGW5GJ22.cjs → chunk-R74TZKJS.cjs} +4 -4
- package/dist/{chunk-TGL5BGMR.js → chunk-REMJWNAT.js} +4 -4
- package/dist/{chunk-3YJU3D5S.cjs → chunk-RIUDYPRB.cjs} +62 -13
- package/dist/{chunk-SWBWZIL4.cjs → chunk-S6OKX4H7.cjs} +2 -2
- package/dist/{chunk-EC4WGEAJ.js → chunk-SABWUELE.js} +2 -2
- package/dist/{chunk-TEEFR2FD.js → chunk-SFAGHPBT.js} +62 -13
- package/dist/{chunk-QKQHZIF3.cjs → chunk-SG42F5VB.cjs} +2 -2
- package/dist/{chunk-5C2AI2SD.js → chunk-SQIWPU6V.js} +2 -2
- package/dist/{chunk-5DKRY67M.cjs → chunk-SYWTT5TY.cjs} +5 -5
- package/dist/{chunk-OBEKX4VR.js → chunk-TVUBGXWA.js} +2 -2
- package/dist/{chunk-7PNJI5UE.cjs → chunk-U2H4DRMV.cjs} +2 -2
- package/dist/{chunk-HKF2V5MM.cjs → chunk-VAXWWJJP.cjs} +9 -9
- package/dist/{chunk-5H5YP2TB.js → chunk-VNNQYJLT.js} +3 -3
- package/dist/{chunk-KGSADAOD.cjs → chunk-VSUMJX6Z.cjs} +2 -2
- package/dist/{chunk-K5IGFBDR.js → chunk-W5CJC7S7.js} +3 -3
- package/dist/{chunk-AXZ7ELMA.js → chunk-WEJKY3DF.js} +2 -2
- package/dist/{chunk-GIZU3H6H.js → chunk-WXWFMWWF.js} +3 -3
- package/dist/{chunk-UKS23N3L.js → chunk-XVP7IKLZ.js} +4 -4
- package/dist/{chunk-ELNT3CFO.js → chunk-Y5F7ZTBH.js} +2 -2
- package/dist/{chunk-QCILPZWP.js → chunk-YJEXAO2I.js} +2 -2
- package/dist/{chunk-7ABFUIOB.cjs → chunk-YNCDTKAE.cjs} +2 -2
- package/dist/{chunk-K7FV7W6U.cjs → chunk-YSCIMHOI.cjs} +5 -5
- package/dist/{chunk-BPOOVO5T.js → chunk-YSXD344H.js} +5 -5
- package/dist/{chunk-47VG2P34.js → chunk-YT5NLCRC.js} +1 -1
- package/dist/{chunk-R2TEDH2F.cjs → chunk-YU5JK247.cjs} +135 -17
- package/dist/{chunk-HZSIUOCN.cjs → chunk-YUKXNWVE.cjs} +1 -1
- package/dist/{chunk-65FIH5A3.js → chunk-YVTLHTG6.js} +2 -2
- package/dist/{chunk-GENABQYA.cjs → chunk-Z4PZ2ZHI.cjs} +2 -2
- package/dist/{chunk-6HMTV6P4.cjs → chunk-ZPKHGKVL.cjs} +4 -4
- package/dist/{chunk-AAGF7K3L.js → chunk-ZPP7LTHP.js} +3 -3
- package/dist/{chunk-IZOHYJUQ.cjs → chunk-ZWCDB5PP.cjs} +2 -2
- package/dist/index.cjs +214 -191
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +49 -46
- package/dist/styles.css +715 -175
- package/dist/{tokens-BIIUTPKN.css → tokens-EF34LSWI.css} +42 -17
- package/dist/tokens.css +42 -17
- package/docs/llms/surface.md +90 -0
- package/docs/llms/theme.md +24 -2
- package/docs/llms/themepanel.md +128 -0
- package/docs/llms/tooltip.md +1 -0
- package/docs/llms/typography.md +12 -2
- package/docs/llms.md +3 -1
- package/package.json +1 -1
|
@@ -20,42 +20,52 @@
|
|
|
20
20
|
|
|
21
21
|
/* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
|
|
22
22
|
--d: 1;
|
|
23
|
+
--shadow-scale: 1;
|
|
24
|
+
--shadow-float-scale: 1;
|
|
23
25
|
|
|
24
|
-
--shadow-blur: calc(16px * var(--d));
|
|
25
|
-
--shadow-offset: calc(6px * var(--d));
|
|
26
|
-
--shadow-inset-blur: calc(10px * var(--d));
|
|
27
|
-
--shadow-inset-offset: calc(4px * var(--d));
|
|
26
|
+
--shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
|
|
27
|
+
--shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
|
|
28
|
+
--shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
|
|
29
|
+
--shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
|
|
28
30
|
|
|
29
|
-
--neu-
|
|
31
|
+
--neu-shadow-panel:
|
|
30
32
|
var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
|
|
31
33
|
calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
|
|
32
34
|
|
|
33
|
-
--neu-
|
|
35
|
+
--neu-shadow-control:
|
|
34
36
|
calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-dark),
|
|
35
37
|
calc(var(--shadow-offset) * -0.5) calc(var(--shadow-offset) * -0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-light);
|
|
36
38
|
|
|
37
|
-
--neu-
|
|
39
|
+
--neu-shadow-lift:
|
|
38
40
|
calc(var(--shadow-offset) * 1.6) calc(var(--shadow-offset) * 1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-dark),
|
|
39
41
|
calc(var(--shadow-offset) * -1.6) calc(var(--shadow-offset) * -1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-light);
|
|
40
42
|
|
|
41
|
-
--neu-
|
|
43
|
+
--neu-shadow-inset-strong:
|
|
42
44
|
inset var(--shadow-inset-offset) var(--shadow-inset-offset) var(--shadow-inset-blur) var(--shadow-dark),
|
|
43
45
|
inset calc(var(--shadow-inset-offset) * -1) calc(var(--shadow-inset-offset) * -1) var(--shadow-inset-blur) var(--shadow-light);
|
|
44
46
|
|
|
45
|
-
--neu-
|
|
47
|
+
--neu-shadow-inset:
|
|
46
48
|
inset calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-dark),
|
|
47
49
|
inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
|
|
48
50
|
|
|
49
|
-
--neu-
|
|
51
|
+
--neu-shadow-subtle:
|
|
50
52
|
1px 1px 2px var(--shadow-dark),
|
|
51
53
|
-1px -1px 2px var(--shadow-light);
|
|
52
54
|
|
|
53
55
|
/* Floating-overlay elevation.
|
|
54
56
|
No top-left highlight — there's no continuous surface beneath an overlay
|
|
55
57
|
panel, so the neumorphic light-reflection metaphor would read as a halo. */
|
|
56
|
-
--neu-float:
|
|
57
|
-
0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
|
|
58
|
-
0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
|
|
58
|
+
--neu-shadow-float:
|
|
59
|
+
0 calc(var(--shadow-offset) * 1.8 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 2.2 * var(--shadow-float-scale)) var(--shadow-dark),
|
|
60
|
+
0 calc(var(--shadow-offset) * 0.4 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 0.7 * var(--shadow-float-scale)) var(--shadow-dark);
|
|
61
|
+
|
|
62
|
+
--neu-out: var(--neu-shadow-panel);
|
|
63
|
+
--neu-out-sm: var(--neu-shadow-control);
|
|
64
|
+
--neu-out-lg: var(--neu-shadow-lift);
|
|
65
|
+
--neu-in: var(--neu-shadow-inset-strong);
|
|
66
|
+
--neu-in-sm: var(--neu-shadow-inset);
|
|
67
|
+
--neu-flat: var(--neu-shadow-subtle);
|
|
68
|
+
--neu-float: var(--neu-shadow-float);
|
|
59
69
|
|
|
60
70
|
/* ---- Accent (default sky) ---- */
|
|
61
71
|
--accent: oklch(68% 0.14 235);
|
|
@@ -89,7 +99,13 @@
|
|
|
89
99
|
|
|
90
100
|
/* ---- Control sizes (density) ---- */
|
|
91
101
|
--ctrl-h: 40px;
|
|
102
|
+
--ctrl-h-sm: 30px;
|
|
103
|
+
--ctrl-h-lg: 52px;
|
|
104
|
+
--field-h-sm: 32px;
|
|
105
|
+
--field-h-lg: 48px;
|
|
92
106
|
--ctrl-pad-x: 18px;
|
|
107
|
+
--ctrl-pad-x-sm: 12px;
|
|
108
|
+
--ctrl-pad-x-lg: 24px;
|
|
93
109
|
|
|
94
110
|
/* ---- Type ---- */
|
|
95
111
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
@@ -97,6 +113,11 @@
|
|
|
97
113
|
"Noto Sans CJK SC", sans-serif;
|
|
98
114
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
|
|
99
115
|
--font-display: "SF Pro Display", var(--font-sans);
|
|
116
|
+
--fs-xs: 11px;
|
|
117
|
+
--fs-sm: 12px;
|
|
118
|
+
--fs-md: 13px;
|
|
119
|
+
--fs-lg: 14px;
|
|
120
|
+
--fs-xl: 15px;
|
|
100
121
|
|
|
101
122
|
/* ---- Motion ---- */
|
|
102
123
|
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
@@ -123,13 +144,17 @@
|
|
|
123
144
|
--shadow-dark: rgba(0, 0, 0, 0.55);
|
|
124
145
|
--shadow-light: rgba(130, 145, 180, 0.06);
|
|
125
146
|
/* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
|
|
126
|
-
--shadow-offset: calc(4px * var(--d));
|
|
127
|
-
--shadow-blur: calc(10px * var(--d));
|
|
128
|
-
--shadow-inset-offset: calc(3px * var(--d));
|
|
129
|
-
--shadow-inset-blur: calc(7px * var(--d));
|
|
147
|
+
--shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
|
|
148
|
+
--shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
|
|
149
|
+
--shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
|
|
150
|
+
--shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
|
|
130
151
|
--accent-soft: oklch(35% 0.06 235);
|
|
131
152
|
--accent-ink: oklch(82% 0.09 235);
|
|
132
153
|
--accent-glow: oklch(68% 0.14 235 / 0.18);
|
|
154
|
+
--info: oklch(78% 0.12 235);
|
|
155
|
+
--success: oklch(78% 0.14 150);
|
|
156
|
+
--warning: oklch(82% 0.14 75);
|
|
157
|
+
--danger: oklch(76% 0.16 25);
|
|
133
158
|
}
|
|
134
159
|
|
|
135
160
|
/* 深色模式的 accent-glow 统一降低强度,避免按钮外圈过亮 */
|
package/dist/tokens.css
CHANGED
|
@@ -20,42 +20,52 @@
|
|
|
20
20
|
|
|
21
21
|
/* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
|
|
22
22
|
--d: 1;
|
|
23
|
+
--shadow-scale: 1;
|
|
24
|
+
--shadow-float-scale: 1;
|
|
23
25
|
|
|
24
|
-
--shadow-blur: calc(16px * var(--d));
|
|
25
|
-
--shadow-offset: calc(6px * var(--d));
|
|
26
|
-
--shadow-inset-blur: calc(10px * var(--d));
|
|
27
|
-
--shadow-inset-offset: calc(4px * var(--d));
|
|
26
|
+
--shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
|
|
27
|
+
--shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
|
|
28
|
+
--shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
|
|
29
|
+
--shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
|
|
28
30
|
|
|
29
|
-
--neu-
|
|
31
|
+
--neu-shadow-panel:
|
|
30
32
|
var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
|
|
31
33
|
calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
|
|
32
34
|
|
|
33
|
-
--neu-
|
|
35
|
+
--neu-shadow-control:
|
|
34
36
|
calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-dark),
|
|
35
37
|
calc(var(--shadow-offset) * -0.5) calc(var(--shadow-offset) * -0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-light);
|
|
36
38
|
|
|
37
|
-
--neu-
|
|
39
|
+
--neu-shadow-lift:
|
|
38
40
|
calc(var(--shadow-offset) * 1.6) calc(var(--shadow-offset) * 1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-dark),
|
|
39
41
|
calc(var(--shadow-offset) * -1.6) calc(var(--shadow-offset) * -1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-light);
|
|
40
42
|
|
|
41
|
-
--neu-
|
|
43
|
+
--neu-shadow-inset-strong:
|
|
42
44
|
inset var(--shadow-inset-offset) var(--shadow-inset-offset) var(--shadow-inset-blur) var(--shadow-dark),
|
|
43
45
|
inset calc(var(--shadow-inset-offset) * -1) calc(var(--shadow-inset-offset) * -1) var(--shadow-inset-blur) var(--shadow-light);
|
|
44
46
|
|
|
45
|
-
--neu-
|
|
47
|
+
--neu-shadow-inset:
|
|
46
48
|
inset calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-dark),
|
|
47
49
|
inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
|
|
48
50
|
|
|
49
|
-
--neu-
|
|
51
|
+
--neu-shadow-subtle:
|
|
50
52
|
1px 1px 2px var(--shadow-dark),
|
|
51
53
|
-1px -1px 2px var(--shadow-light);
|
|
52
54
|
|
|
53
55
|
/* Floating-overlay elevation.
|
|
54
56
|
No top-left highlight — there's no continuous surface beneath an overlay
|
|
55
57
|
panel, so the neumorphic light-reflection metaphor would read as a halo. */
|
|
56
|
-
--neu-float:
|
|
57
|
-
0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
|
|
58
|
-
0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
|
|
58
|
+
--neu-shadow-float:
|
|
59
|
+
0 calc(var(--shadow-offset) * 1.8 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 2.2 * var(--shadow-float-scale)) var(--shadow-dark),
|
|
60
|
+
0 calc(var(--shadow-offset) * 0.4 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 0.7 * var(--shadow-float-scale)) var(--shadow-dark);
|
|
61
|
+
|
|
62
|
+
--neu-out: var(--neu-shadow-panel);
|
|
63
|
+
--neu-out-sm: var(--neu-shadow-control);
|
|
64
|
+
--neu-out-lg: var(--neu-shadow-lift);
|
|
65
|
+
--neu-in: var(--neu-shadow-inset-strong);
|
|
66
|
+
--neu-in-sm: var(--neu-shadow-inset);
|
|
67
|
+
--neu-flat: var(--neu-shadow-subtle);
|
|
68
|
+
--neu-float: var(--neu-shadow-float);
|
|
59
69
|
|
|
60
70
|
/* ---- Accent (default sky) ---- */
|
|
61
71
|
--accent: oklch(68% 0.14 235);
|
|
@@ -89,7 +99,13 @@
|
|
|
89
99
|
|
|
90
100
|
/* ---- Control sizes (density) ---- */
|
|
91
101
|
--ctrl-h: 40px;
|
|
102
|
+
--ctrl-h-sm: 30px;
|
|
103
|
+
--ctrl-h-lg: 52px;
|
|
104
|
+
--field-h-sm: 32px;
|
|
105
|
+
--field-h-lg: 48px;
|
|
92
106
|
--ctrl-pad-x: 18px;
|
|
107
|
+
--ctrl-pad-x-sm: 12px;
|
|
108
|
+
--ctrl-pad-x-lg: 24px;
|
|
93
109
|
|
|
94
110
|
/* ---- Type ---- */
|
|
95
111
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
@@ -97,6 +113,11 @@
|
|
|
97
113
|
"Noto Sans CJK SC", sans-serif;
|
|
98
114
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
|
|
99
115
|
--font-display: "SF Pro Display", var(--font-sans);
|
|
116
|
+
--fs-xs: 11px;
|
|
117
|
+
--fs-sm: 12px;
|
|
118
|
+
--fs-md: 13px;
|
|
119
|
+
--fs-lg: 14px;
|
|
120
|
+
--fs-xl: 15px;
|
|
100
121
|
|
|
101
122
|
/* ---- Motion ---- */
|
|
102
123
|
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
@@ -123,13 +144,17 @@
|
|
|
123
144
|
--shadow-dark: rgba(0, 0, 0, 0.55);
|
|
124
145
|
--shadow-light: rgba(130, 145, 180, 0.06);
|
|
125
146
|
/* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
|
|
126
|
-
--shadow-offset: calc(4px * var(--d));
|
|
127
|
-
--shadow-blur: calc(10px * var(--d));
|
|
128
|
-
--shadow-inset-offset: calc(3px * var(--d));
|
|
129
|
-
--shadow-inset-blur: calc(7px * var(--d));
|
|
147
|
+
--shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
|
|
148
|
+
--shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
|
|
149
|
+
--shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
|
|
150
|
+
--shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
|
|
130
151
|
--accent-soft: oklch(35% 0.06 235);
|
|
131
152
|
--accent-ink: oklch(82% 0.09 235);
|
|
132
153
|
--accent-glow: oklch(68% 0.14 235 / 0.18);
|
|
154
|
+
--info: oklch(78% 0.12 235);
|
|
155
|
+
--success: oklch(78% 0.14 150);
|
|
156
|
+
--warning: oklch(82% 0.14 75);
|
|
157
|
+
--danger: oklch(76% 0.16 25);
|
|
133
158
|
}
|
|
134
159
|
|
|
135
160
|
/* 深色模式的 accent-glow 统一降低强度,避免按钮外圈过亮 */
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Surface 背景面
|
|
2
|
+
|
|
3
|
+
> 主题感知的背景承载容器,用于给特殊色调内容提供正确的拟态 token 语境。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Surface, SURFACE_THEME_PRESETS } from "@fangxinyan/lumina";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 示例
|
|
12
|
+
|
|
13
|
+
### 基础承载
|
|
14
|
+
|
|
15
|
+
默认继承外部主题,只提供一片稳定的拟态背景。
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<Surface padding="lg" radius="xl">
|
|
19
|
+
<Card title="运行概览" description="Surface 负责外部背景,Card 负责信息分组">
|
|
20
|
+
<Button variant="primary">开始</Button>
|
|
21
|
+
</Card>
|
|
22
|
+
</Surface>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### 内置背景预设
|
|
26
|
+
|
|
27
|
+
preset 会建立一套局部 ThemeProvider,子组件和 useTheme 都处在这套背景 token 下。
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
<Surface preset="graphite" padding="lg" radius="xl">
|
|
31
|
+
<Button variant="primary">深色面板</Button>
|
|
32
|
+
</Surface>
|
|
33
|
+
|
|
34
|
+
<Surface preset="porcelain" padding="lg" radius="xl">
|
|
35
|
+
<Input placeholder="清亮浅色面板" />
|
|
36
|
+
</Surface>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 背景语义
|
|
40
|
+
|
|
41
|
+
tone 只切换背景槽位;适合在同一主题里区分基底、凸起、凹陷和强调底。
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Surface tone="base">base</Surface>
|
|
45
|
+
<Surface tone="raised">raised</Surface>
|
|
46
|
+
<Surface tone="sunken">sunken</Surface>
|
|
47
|
+
<Surface tone="accent">accent</Surface>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 自定义局部主题
|
|
51
|
+
|
|
52
|
+
可直接传 mode、accent、tokens 等主题参数。themeRadius 控制子树 token, radius 控制 Surface 自身圆角。
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<Surface
|
|
56
|
+
mode="dark"
|
|
57
|
+
accent="mint"
|
|
58
|
+
themeRadius={18}
|
|
59
|
+
tokens={{
|
|
60
|
+
bg: "#171d20",
|
|
61
|
+
"bg-raised": "#20282c",
|
|
62
|
+
"bg-sunken": "#101517",
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
<Card>...</Card>
|
|
66
|
+
</Surface>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
**Surface**
|
|
72
|
+
|
|
73
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
74
|
+
| --- | --- | --- | --- |
|
|
75
|
+
| preset | `"inherit" | "mist" | "porcelain" | "graphite" | "ember"` | `"inherit"` | 内置局部背景预设 |
|
|
76
|
+
| tone | `"base" | "raised" | "sunken" | "accent"` | `"base"` | 可见背景槽位 |
|
|
77
|
+
| variant | `"plain" | "raised" | "sunken" | "floating"` | `"plain"` | Surface 自身拟态层级 |
|
|
78
|
+
| padding | `"none" | "sm" | "md" | "lg" | "xl"` | `"md"` | 内边距 |
|
|
79
|
+
| radius | `"none" | "sm" | "md" | "lg" | "xl"` | `"lg"` | Surface 自身圆角 |
|
|
80
|
+
| height | `"content" | "fill" | "screen"` | `"content"` | 高度语义 |
|
|
81
|
+
| bordered | `boolean` | `false` | 显示 token 描边 |
|
|
82
|
+
| scrollable | `boolean` | `false` | 受限高度下允许内部滚动 |
|
|
83
|
+
| mode / colorScheme / accent | `ThemeConfig fields` | — | 局部主题深浅色与强调色 |
|
|
84
|
+
| density / intensity / themeRadius / font | `ThemeConfig fields` | — | 局部密度、阴影、主题圆角和字体 |
|
|
85
|
+
| tokens | `ThemeTokens` | — | 局部 CSS token 覆写 |
|
|
86
|
+
| themes | `ThemePresets` | — | 局部自定义模式注册表 |
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
[← 回到索引](../llms.md)
|
package/docs/llms/theme.md
CHANGED
|
@@ -48,6 +48,21 @@ t.update({ radius: 14 }); // 一次改多个
|
|
|
48
48
|
t.reset(); // 重置到 props 初值
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
+
### 阴影系统
|
|
52
|
+
|
|
53
|
+
阴影强度、扩散和浮层深度都由 ThemeProvider tokens 驱动,组件只消费语义阴影 token。
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
const t = useTheme();
|
|
57
|
+
|
|
58
|
+
t.setIntensity(6);
|
|
59
|
+
t.setTokens({
|
|
60
|
+
...t.tokens,
|
|
61
|
+
"shadow-scale": "1.15",
|
|
62
|
+
"shadow-float-scale": "1.25",
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
51
66
|
### 预设强调色
|
|
52
67
|
|
|
53
68
|
内置 6 种拟态强调色,点击切换。
|
|
@@ -86,6 +101,8 @@ mode 可以指向 themes 中的命名 preset。base 决定 light/dark 基底,tok
|
|
|
86
101
|
```tsx
|
|
87
102
|
const themes = {
|
|
88
103
|
graphite: {
|
|
104
|
+
label: "Graphite",
|
|
105
|
+
description: "深色",
|
|
89
106
|
base: "dark",
|
|
90
107
|
accent: {
|
|
91
108
|
accent: "oklch(72% 0.13 190)",
|
|
@@ -102,6 +119,8 @@ const themes = {
|
|
|
102
119
|
fg: "#edf1f7",
|
|
103
120
|
"shadow-dark": "rgba(0,0,0,.58)",
|
|
104
121
|
"shadow-light": "rgba(128,146,166,.07)",
|
|
122
|
+
"shadow-scale": "1",
|
|
123
|
+
"shadow-float-scale": "1",
|
|
105
124
|
},
|
|
106
125
|
},
|
|
107
126
|
};
|
|
@@ -139,6 +158,8 @@ tokens prop 可以改 tokens.css 里任何变量 —— 键名可省略 --。
|
|
|
139
158
|
bg: "#f5f5f7", // 等价 --bg
|
|
140
159
|
"--bg-sunken": "#e8e8ed",
|
|
141
160
|
"shadow-dark": "rgba(0,0,0,0.18)",
|
|
161
|
+
"shadow-scale": "0.9",
|
|
162
|
+
"shadow-float-scale": "1.15",
|
|
142
163
|
"--font-display": '"Inter", sans-serif',
|
|
143
164
|
}}
|
|
144
165
|
/>
|
|
@@ -171,11 +192,12 @@ applyTheme(document.documentElement, {
|
|
|
171
192
|
| intensity | `number` | `5` | 阴影强度 1-10 |
|
|
172
193
|
| radius | `number` | `20` | 圆角基准 px |
|
|
173
194
|
| font | `FontConfig` | `"sf"` | 字体预设或 CSS 栈 |
|
|
174
|
-
| tokens | `Record<string, string>` | — | 任意 CSS
|
|
195
|
+
| tokens | `Record<string, string>` | — | 任意 CSS 变量覆写;推荐用语义阴影 token 和 shadow-scale / shadow-float-scale 控制阴影系统 |
|
|
175
196
|
| themes | `Record<string, ThemePreset>` | — | 命名自定义模式 preset |
|
|
197
|
+
| ThemePreset.label / description | `string` | — | 可选展示元信息;ThemePanel 会读取它作为卡片标题和说明 |
|
|
176
198
|
| target | `"root" | "scope"` | `"root"` | 应用到根还是局部 |
|
|
177
199
|
| as | `keyof JSX.IntrinsicElements` | `"div"` | scope 模式的元素标签 |
|
|
178
|
-
| storageKey | `string` | — | localStorage 持久化 key |
|
|
200
|
+
| storageKey | `string` | — | localStorage 持久化 key,包含当前主题状态与自定义 themes |
|
|
179
201
|
| onChange | `(value: ThemeValue) => void` | — | 主题值变更回调 |
|
|
180
202
|
|
|
181
203
|
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# ThemePanel 主题面板
|
|
2
|
+
|
|
3
|
+
> 可复用的主题快速调节面板,直接驱动最近的 ThemeProvider。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { ThemeProvider, ThemePanel, THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS } from "@fangxinyan/lumina";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 示例
|
|
12
|
+
|
|
13
|
+
### 完整面板
|
|
14
|
+
|
|
15
|
+
默认包含浅色、深色、瓷白、助手、助手暗五个主题卡片,并提供简洁/深度两档新建主题入口;其余控制项直接驱动 useTheme。
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<ThemeProvider>
|
|
19
|
+
<ThemePanel />
|
|
20
|
+
</ThemeProvider>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 外部保存与回灌
|
|
24
|
+
|
|
25
|
+
onCreateTheme / onDeleteTheme 会把新建和删除事件交给业务侧;业务侧保存后通过 ThemeProvider themes 回灌。
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { ThemeProvider, ThemePanel, type ThemePresets } from "lumina";
|
|
29
|
+
|
|
30
|
+
const [themes, setThemes] = React.useState<ThemePresets>({});
|
|
31
|
+
|
|
32
|
+
<ThemeProvider themes={themes} storageKey="app:theme">
|
|
33
|
+
<ThemePanel
|
|
34
|
+
onCreateTheme={(payload) => {
|
|
35
|
+
setThemes((current) => ({
|
|
36
|
+
...current,
|
|
37
|
+
[String(payload.key)]: payload.preset,
|
|
38
|
+
}));
|
|
39
|
+
saveThemeToServerOrStorage(payload);
|
|
40
|
+
}}
|
|
41
|
+
onDeleteTheme={(payload) => {
|
|
42
|
+
setThemes((current) => {
|
|
43
|
+
const { [String(payload.key)]: removed, ...next } = current;
|
|
44
|
+
return next;
|
|
45
|
+
});
|
|
46
|
+
deleteThemeFromServerOrStorage(payload);
|
|
47
|
+
}}
|
|
48
|
+
/>
|
|
49
|
+
</ThemeProvider>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 精简面板
|
|
53
|
+
|
|
54
|
+
用 sections 控制展示哪些调节项,适合放进抽屉、设置页侧栏或开发调试区。
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
<ThemePanel
|
|
58
|
+
compact
|
|
59
|
+
title="微调"
|
|
60
|
+
description={null}
|
|
61
|
+
sections={["accent", "shadow", "radius"]}
|
|
62
|
+
showReset={false}
|
|
63
|
+
/>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API
|
|
67
|
+
|
|
68
|
+
**ThemePanel**
|
|
69
|
+
|
|
70
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
71
|
+
| --- | --- | --- | --- |
|
|
72
|
+
| title | `ReactNode` | `"主题"` | 面板标题;传 null 可隐藏标题文本 |
|
|
73
|
+
| description | `ReactNode` | `"快速调整当前 Lumina 主题"` | 面板副标题 |
|
|
74
|
+
| sections | `ThemePanelSection[]` | — | 展示的控制区及顺序;shadow 区同时控制 intensity / shadow-scale / shadow-float-scale |
|
|
75
|
+
| modeOptions | `ThemePanelModeOption[]` | — | 模式切换项 |
|
|
76
|
+
| presetOptions | `ThemePanelPresetOption[]` | — | 命名主题预设卡片;不传时使用浅色/深色/瓷白/助手/助手暗 + theme.themes,也可完全由业务侧控制 |
|
|
77
|
+
| defaultCustomAccent | `string` | `"#845ef7"` | 自定义强调色初始值 |
|
|
78
|
+
| allowCreateTheme | `boolean` | `true` | 在预设区显示新建主题流程 |
|
|
79
|
+
| defaultCreateThemeName | `string` | `"我的主题"` | 新建主题的默认名称 |
|
|
80
|
+
| createThemeKeyPrefix | `string` | `"user"` | 生成自建主题 mode key 时使用的前缀 |
|
|
81
|
+
| onCreateTheme | `(payload: ThemePanelCreateThemePayload) => void` | — | 保存自建主题后的回调,业务侧可把 payload.preset 存起来并通过 ThemeProvider themes 回灌 |
|
|
82
|
+
| allowDeleteTheme | `boolean` | `true` | 为非默认主题显示删除按钮;默认主题不会显示删除入口 |
|
|
83
|
+
| onDeleteTheme | `(payload: ThemePanelDeleteThemePayload) => void` | — | 删除非默认主题后的回调,业务侧可同步删除外部存储 |
|
|
84
|
+
| showReset | `boolean` | `true` | 显示重置按钮 |
|
|
85
|
+
| compact | `boolean` | `false` | 紧凑布局 |
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
**默认预设常量**
|
|
89
|
+
|
|
90
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
91
|
+
| --- | --- | --- | --- |
|
|
92
|
+
| THEME_PANEL_DEFAULT_PRESET_OPTIONS | `ThemePanelPresetOption[]` | — | ThemePanel 默认卡片列表: 浅色、深色、瓷白、助手、助手暗 |
|
|
93
|
+
| THEME_PANEL_DEFAULT_THEME_PRESETS | `Record<string, ThemePreset>` | — | 默认卡片背后的 ThemePreset 配置 |
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
**ThemePanelPresetOption**
|
|
97
|
+
|
|
98
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
99
|
+
| --- | --- | --- | --- |
|
|
100
|
+
| key \* | `ThemeMode` | — | 主题 mode key;若存在于 theme.themes 会应用对应 preset |
|
|
101
|
+
| label \* | `ReactNode` | — | 卡片标题 |
|
|
102
|
+
| description | `ReactNode` | — | 卡片说明 |
|
|
103
|
+
| preset | `ThemePreset` | — | 可选 preset;点击时会注册并应用 |
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
**ThemePanelCreateThemePayload**
|
|
107
|
+
|
|
108
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
109
|
+
| --- | --- | --- | --- |
|
|
110
|
+
| key | `ThemeMode` | — | 保存后注册到 ThemeProvider 的 mode key |
|
|
111
|
+
| label | `string` | — | 用户输入的主题名称 |
|
|
112
|
+
| description | `string` | — | ThemePanel 生成的说明文案,如自建亮/自建暗 |
|
|
113
|
+
| preset | `ThemePreset` | — | 最终保存到 theme.themes 的主题配置 |
|
|
114
|
+
| presetOption | `ThemePanelPresetOption` | — | 可直接追加到受控 presetOptions 的卡片配置 |
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
**ThemePanelDeleteThemePayload**
|
|
118
|
+
|
|
119
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
120
|
+
| --- | --- | --- | --- |
|
|
121
|
+
| key | `ThemeMode` | — | 被删除的主题 mode key |
|
|
122
|
+
| label | `string` | — | 被删除主题的展示名称 |
|
|
123
|
+
| description | `string` | — | 被删除主题的说明文案 |
|
|
124
|
+
| preset | `ThemePreset` | — | 删除前的主题配置;如果对应 key 不存在于 ThemeProvider themes 则为空 |
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
[← 回到索引](../llms.md)
|
package/docs/llms/tooltip.md
CHANGED
|
@@ -42,6 +42,7 @@ title 与 content 等价,也支持 bottomLeft 等细分位置。
|
|
|
42
42
|
| title | `ReactNode` | — | content 的等价别名 |
|
|
43
43
|
| placement | `"top" | "bottom" | "left" | "right" | ...` | `"top"` | 位置,支持 bottomLeft 等细分方向 |
|
|
44
44
|
| delay | `number` | `250` | 悬浮延时 (ms) |
|
|
45
|
+
| closeDelay | `number` | `300` | 离开触发器或提示浮层后的关闭延时 (ms) |
|
|
45
46
|
| disabled | `boolean` | `false` | 禁用提示 |
|
|
46
47
|
| open / visible | `boolean` | — | 受控显示状态 |
|
|
47
48
|
| overlayClassName / popupClassName | `string` | — | 浮层 className |
|
package/docs/llms/typography.md
CHANGED
|
@@ -57,10 +57,10 @@ import { Typography } from "@fangxinyan/lumina";
|
|
|
57
57
|
|
|
58
58
|
### 省略截断
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
多行截断支持「展开」,悬停时可查看完整内容。
|
|
61
61
|
|
|
62
62
|
```tsx
|
|
63
|
-
<Typography.Paragraph ellipsis={{ rows: 2, expandable: true }}>{long}</Typography.Paragraph>
|
|
63
|
+
<Typography.Paragraph ellipsis={{ rows: 2, expandable: true, tooltip: true }}>{long}</Typography.Paragraph>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
### 链接
|
|
@@ -90,6 +90,16 @@ import { Typography } from "@fangxinyan/lumina";
|
|
|
90
90
|
| ellipsis | `boolean | EllipsisConfig` | — | 截断省略 |
|
|
91
91
|
|
|
92
92
|
|
|
93
|
+
**EllipsisConfig**
|
|
94
|
+
|
|
95
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
96
|
+
| --- | --- | --- | --- |
|
|
97
|
+
| rows | `number` | `1` | 截断行数 |
|
|
98
|
+
| expandable | `boolean` | `false` | 显示展开入口 |
|
|
99
|
+
| tooltip | `boolean | ReactNode` | `false` | 悬停显示完整内容 |
|
|
100
|
+
| symbol | `ReactNode` | `"展开"` | 自定义展开文案 |
|
|
101
|
+
|
|
102
|
+
|
|
93
103
|
**Typography.Link**
|
|
94
104
|
|
|
95
105
|
| Prop | 类型 | 默认 | 说明 |
|
package/docs/llms.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
> 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
|
|
4
4
|
|
|
5
5
|
- **包名**: `@fangxinyan/lumina`
|
|
6
|
-
- **版本**: `0.6.
|
|
6
|
+
- **版本**: `0.6.5`
|
|
7
7
|
- **React 最低版本**: 18
|
|
8
8
|
- **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
|
|
9
9
|
- **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
|
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
|
|
44
44
|
- [Lumina](./llms/intro.md) — 为 Electron 应用定制的拟态风格 React 组件库。
|
|
45
45
|
- [Theme 主题](./llms/theme.md) — ThemeProvider + useTheme,覆盖深浅色、自定义模式、强调色、密度、圆角、字体、阴影强度。
|
|
46
|
+
- [Surface 背景面](./llms/surface.md) — 主题感知的背景承载容器,用于给特殊色调内容提供正确的拟态 token 语境。
|
|
47
|
+
- [ThemePanel 主题面板](./llms/themepanel.md) — 可复用的主题快速调节面板,直接驱动最近的 ThemeProvider。
|
|
46
48
|
|
|
47
49
|
### 通用
|
|
48
50
|
|