@lemonppt/themes 0.2.0 → 0.2.2

package/src/theme03/styles.css

@@ -95,7 +95,7 @@
   padding: 8px 12px;
   border-radius: var(--lp-radius-small);
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   font-family: var(--lp-font-mono);
   font-size: 13px;
   font-weight: 700;
@@ -110,7 +110,7 @@
 }
 
 [data-appearance="light"] .lp-theme03-tag {
-  color: var(--lp-ink);
+  color: #ffffff;
 }
 
 [data-appearance="light"] .lp-theme03-tag--ghost {
@@ -305,8 +305,8 @@
 
 .lp-theme03-cover-stats {
   display: flex;
-  gap: 64px;
-  padding-bottom: 96px;
+  gap: 48px;
+  padding-bottom: 40px;
 }
 
 .lp-theme03-cover-stat {
@@ -746,8 +746,9 @@
 .lp-theme03-ranking-main {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 20px;
   flex: 1;
+  min-height: 0;
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -780,20 +781,20 @@
 .lp-theme03-ranking-list {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 8px;
 }
 
 .lp-theme03-ranking-row {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 14px 0;
+  gap: 6px;
+  padding: 6px 0;
   border-bottom: 1px solid var(--lp-divider);
 }
 
 .lp-theme03-ranking-row--top .lp-theme03-ranking-rank {
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
 }
 
 .lp-theme03-ranking-row--top .lp-theme03-ranking-name,
@@ -882,9 +883,9 @@
 .lp-theme03-ranking-insight {
   display: flex;
   align-items: flex-start;
-  gap: 16px;
-  margin-top: auto;
-  padding-top: 16px;
+  gap: 12px;
+  margin-top: 12px;
+  padding-top: 8px;
 }
 
 .lp-theme03-ranking-insight-label {
@@ -898,8 +899,8 @@
 }
 
 .lp-theme03-ranking-insight-text {
-  font-size: 16px;
-  line-height: 1.55;
+  font-size: 15px;
+  line-height: 1.45;
   color: var(--lp-ink2);
 }
 
@@ -1219,8 +1220,9 @@
 .lp-theme03-chart-donut-main {
   display: flex;
   flex-direction: column;
-  gap: 40px;
+  gap: 26px;
   flex: 1;
+  min-height: 0;
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -1685,10 +1687,11 @@
   padding: 6px 10px;
   border-radius: var(--lp-radius-small);
   background: var(--lp-surface-strong);
+  color: var(--lp-ink);
   font-family: var(--lp-font-mono);
   font-size: 14px;
   font-weight: 800;
-  color: var(--lp-accent);
+  color: var(--lp-ink);
   letter-spacing: 0.04em;
 }
 
@@ -2668,8 +2671,9 @@
 .lp-theme03-partners-main {
   display: flex;
   flex-direction: column;
-  gap: 48px;
+  gap: 40px;
   flex: 1;
+  min-height: 0;
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -2837,7 +2841,7 @@
   padding: 6px 12px;
   border-radius: var(--lp-radius-small);
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   font-family: var(--lp-font-mono);
   font-size: 11px;
   font-weight: 800;
@@ -2907,7 +2911,7 @@
   padding: 12px 20px;
   border-radius: var(--lp-radius-small);
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   font-size: 14px;
   font-weight: 700;
   text-align: center;
@@ -3131,7 +3135,7 @@
 
 .lp-theme03-faq-marker--q {
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
 }
 
 .lp-theme03-faq-marker--a {
@@ -3834,7 +3838,7 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-align: left;
-  color: var(--lp-accent);
+  color: var(--lp-ink);
 }
 
 .lp-theme03-table td {
@@ -4048,7 +4052,7 @@
 .lp-theme03-tags-v1-value {
   padding: 2px 6px;
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   border-radius: 999px;
   font-size: 11px;
   font-weight: 800;
@@ -4900,7 +4904,7 @@
   justify-content: center;
   border-radius: var(--lp-radius-large);
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
 }
 
 .lp-theme03-metric-v3-icon-text {
@@ -5480,7 +5484,7 @@
   justify-content: center;
   border-radius: 50%;
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   font-family: var(--lp-font-mono);
   font-size: 16px;
   font-weight: 800;
@@ -5756,8 +5760,9 @@
 .lp-theme03-spotlight-grid-main {
   display: flex;
   flex-direction: column;
-  gap: 40px;
+  gap: 26px;
   flex: 1;
+  min-height: 0;
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -5791,8 +5796,9 @@
 
 .lp-theme03-spotlight-grid-body {
   display: grid;
-  gap: 24px;
+  gap: 18px;
   flex: 1;
+  min-height: 0;
   align-content: center;
 }
 
@@ -6781,7 +6787,7 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-align: left;
-  color: var(--lp-accent);
+  color: var(--lp-ink);
 }
 
 .lp-theme03-table-data-td {
@@ -7044,7 +7050,7 @@
   margin-top: 32px;
   padding: 14px 28px;
   background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  color: var(--lp-text-on-accent);
   font-family: var(--lp-font-mono);
   font-size: 14px;
   font-weight: 700;
@@ -7609,6 +7615,7 @@
   z-index: 2;
   display: flex;
   flex: 1;
+  min-height: 0;
   align-items: center;
   padding-top: 24px;
   padding-bottom: 24px;

package/src/theme04/styles.css

@@ -3146,7 +3146,7 @@
   font-size: var(--lp-font-size-h2);
   font-weight: 900;
   color: var(--lp-ink);
-  opacity: 0.35;
+  opacity: 1;
 }
 
 .lp-theme04-cover-index-card-title {
@@ -3397,7 +3397,7 @@
 }
 
 .lp-theme04-quadrant-axis-end {
-  opacity: 0.7;
+  opacity: 1;
 }
 
 .lp-theme04-quadrant-grid {
@@ -3787,7 +3787,7 @@
   font-size: var(--lp-font-size-h3);
   font-weight: 900;
   color: var(--lp-ink3);
-  opacity: 0.5;
+  opacity: 1;
 }
 
 .lp-theme04-stat-label-small {
@@ -8047,7 +8047,7 @@
   font-family: var(--lp-font-mono);
   font-size: 11px;
   color: var(--lp-ink3);
-  opacity: 0.7;
+  opacity: 1;
 }
 
 .lp-theme04-calendar-event {
@@ -8737,3 +8737,22 @@
   }
 }
 
+/* 对比度修复 #321：浅底版式容器内次级文字加深
+   默认 :root（dark 外观）的 --lp-ink2/--lp-ink3 为浅色，落在浅 substrate（#FAFAF8）上不达标。
+   这些版式容器统一为浅底，故在本地把 ink 设为深色，其下级 footnote/subtitle/caption/kicker 自动继承。 */
+.lp-theme04-chaintable,
+.lp-theme04-closing,
+/* 浅底容器：次级文字/标题加深。chapter/closing 的 tag 与 closing-cta 落在绿色 accent 徽标上，
+   不能在此强制深色，须沿用 base 的 var(--lp-text-inverse)（浅外观=白字、深外观=深色字），
+   故此处仅保留落在浅色卡面上的 tag。 */
+.lp-theme04-chaintable .lp-theme04-tag,
+.lp-theme04-layers .lp-theme04-tag,
+.lp-theme04-ledger .lp-theme04-tag,
+.lp-theme04-matrix .lp-theme04-tag,
+.lp-theme04-content .lp-theme04-tag,
+.lp-theme04-image .lp-theme04-tag,
+.lp-theme04-chainflow .lp-theme04-tag,
+.lp-theme04-calendar .lp-theme04-tag {
+  color: #0A0A0A;
+}
+

package/src/theme05/styles.css

@@ -200,7 +200,7 @@
   border: 1px solid var(--lp-border);
   border-radius: var(--lp-radius-medium);
   box-shadow: var(--lp-shadow-sm);
-  padding: 24px;
+  padding: 10px;
 }
 
 .lp-theme05-card--accent {
@@ -221,7 +221,7 @@
 .lp-theme05-card--violet { border-top: 4px solid #7C3AED; }
 
 .lp-theme05-card-value {
-  font-size: var(--lp-font-size-h2);
+  font-size: 32px;
   font-weight: 800;
   color: var(--lp-ink);
   line-height: 1.1;
@@ -233,7 +233,7 @@
   color: var(--lp-ink3);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 /* ---- 列表 ---- */
@@ -426,7 +426,7 @@
 /* ---- 指标 ---- */
 
 .lp-theme05-metric {
-  padding: 92px 84px 96px;
+  padding: 56px 84px 52px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -436,7 +436,7 @@
   display: flex;
   align-items: baseline;
   gap: 16px;
-  margin-top: 32px;
+  margin-top: 26px;
 }
 
 .lp-theme05-metric-hero-value {
@@ -456,8 +456,9 @@
 .lp-theme05-metric-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-top: 48px;
+  gap: 10px;
+  margin-top: 2px;
+  min-height: 0;
 }
 
 /* ---- 图表 ---- */
@@ -490,7 +491,7 @@
 /* ---- 排名 ---- */
 
 .lp-theme05-rank {
-  padding: 92px 84px 96px;
+  padding: 92px 84px 92px;
   display: flex;
   flex-direction: column;
 }
@@ -498,8 +499,9 @@
 .lp-theme05-rank-rows {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  margin-top: 36px;
+  gap: 10px;
+  margin-top: 20px;
+  min-height: 0;
 }
 
 .lp-theme05-rank-row {
@@ -507,7 +509,7 @@
   grid-template-columns: 48px 1fr auto auto;
   align-items: center;
   gap: 20px;
-  padding: 18px 22px;
+  padding: 15px 20px;
   background: var(--lp-surface-solid);
   border: 1px solid var(--lp-border);
   border-radius: var(--lp-radius-medium);
@@ -583,7 +585,7 @@
   font-family: var(--lp-font-mono);
   font-size: 11px;
   font-weight: 700;
-  color: var(--lp-text-inverse);
+  color: var(--lp-white-alpha-90);
 }
 
 .lp-theme05-heatmap-labels {
@@ -709,16 +711,16 @@
   left: 20px;
   right: 20px;
   padding: 16px 20px;
-  background: var(--lp-scrim);
+  background: rgba(21, 21, 26, 0.72);
   backdrop-filter: blur(8px);
   border-radius: var(--lp-radius-medium);
-  color: var(--lp-text-inverse);
+  color: var(--lp-white-alpha-90);
 }
 
 .lp-theme05-image-annotation-value {
   font-size: var(--lp-font-size-h2);
   font-weight: 800;
-  color: var(--lp-accent);
+  color: var(--lp-white-alpha-90);
 }
 
 .lp-theme05-image-annotation-label {
@@ -1020,15 +1022,15 @@
   font-family: var(--lp-font-mono);
   font-size: 16px;
   font-weight: 800;
-  color: var(--lp-text-inverse);
-  background: var(--lp-accent);
+  color: var(--lp-white-alpha-90);
+  background: var(--lp-coral);
 }
 
-.lp-theme05-timeline-dot--coral { background: #E85D4E; }
-.lp-theme05-timeline-dot--amber { background: #F5A623; }
-.lp-theme05-timeline-dot--teal { background: #0FA3B1; }
-.lp-theme05-timeline-dot--indigo { background: #4A58D9; }
-.lp-theme05-timeline-dot--violet { background: #7C3AED; }
+.lp-theme05-timeline-dot--coral { background: var(--lp-coral); }
+.lp-theme05-timeline-dot--amber { background: var(--lp-amber); }
+.lp-theme05-timeline-dot--teal { background: var(--lp-teal); }
+.lp-theme05-timeline-dot--indigo { background: var(--lp-indigo); }
+.lp-theme05-timeline-dot--violet { background: var(--lp-violet); }
 
 .lp-theme05-timeline-period {
   font-family: var(--lp-font-mono);
@@ -2045,16 +2047,16 @@
   font-family: var(--lp-font-mono);
   font-size: 16px;
   font-weight: 800;
-  color: var(--lp-text-inverse);
-  background: var(--lp-accent);
+  color: var(--lp-white-alpha-90);
+  background: var(--lp-coral);
   flex: none;
 }
 
-.lp-theme05-roadmap-node--coral { background: #E85D4E; }
-.lp-theme05-roadmap-node--amber { background: #F5A623; }
-.lp-theme05-roadmap-node--teal { background: #0FA3B1; }
-.lp-theme05-roadmap-node--indigo { background: #4A58D9; }
-.lp-theme05-roadmap-node--violet { background: #7C3AED; }
+.lp-theme05-roadmap-node--coral { background: var(--lp-coral); }
+.lp-theme05-roadmap-node--amber { background: var(--lp-amber); }
+.lp-theme05-roadmap-node--teal { background: var(--lp-teal); }
+.lp-theme05-roadmap-node--indigo { background: var(--lp-indigo); }
+.lp-theme05-roadmap-node--violet { background: var(--lp-violet); }
 
 .lp-theme05-roadmap-card {
   width: 100%;
@@ -2504,8 +2506,8 @@
 
 .lp-theme05-cover-ex2-highlight {
   padding: 8px 16px;
-  background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  background: var(--lp-coral);
+  color: var(--lp-white-alpha-90);
   border-radius: 999px;
   font-size: var(--lp-font-size-caption);
   font-weight: 700;
@@ -2538,6 +2540,7 @@
   justify-content: flex-end;
   padding: 92px 84px 96px;
   overflow: hidden;
+  background: linear-gradient(180deg, rgba(21, 21, 26, 0.82) 0%, rgba(21, 21, 26, 0.92) 100%);
 }
 
 .lp-theme05-cover-hero-media {
@@ -2581,9 +2584,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--lp-ink3);
-  border: 2px dashed var(--lp-border);
-  background: var(--lp-surface);
+  color: var(--lp-white-alpha-80);
+  border: 2px dashed rgba(255, 255, 255, 0.18);
+  background: rgba(21, 21, 26, 0.55);
 }
 
 .lp-theme05-cover-hero-content {
@@ -2726,6 +2729,7 @@
   justify-content: center;
   padding: 92px 84px 96px;
   overflow: hidden;
+  background: linear-gradient(90deg, rgba(21, 21, 26, 0.82) 0%, rgba(21, 21, 26, 0.42) 100%);
 }
 
 .lp-theme05-chapter-image-media {
@@ -2746,9 +2750,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--lp-ink3);
-  border: 2px dashed var(--lp-border);
-  background: var(--lp-surface);
+  color: var(--lp-white-alpha-80);
+  border: 2px dashed rgba(255, 255, 255, 0.18);
+  background: rgba(21, 21, 26, 0.55);
 }
 
 .lp-theme05-chapter-image-overlay {
@@ -2768,7 +2772,7 @@
   font-family: var(--lp-font-mono);
   font-size: var(--lp-font-size-caption);
   font-weight: 700;
-  color: var(--lp-accent);
+  color: var(--lp-white-alpha-90);
   letter-spacing: 0.16em;
   text-transform: uppercase;
 }
@@ -2790,6 +2794,11 @@
   margin-top: 18px;
 }
 
+.lp-theme05-cover-hero .lp-theme05-kicker,
+.lp-theme05-chapter-image .lp-theme05-kicker {
+  color: var(--lp-white-alpha-90);
+}
+
 /* ---- 数据指标变体 ---- */
 
 .lp-theme05-metric-hero {
@@ -3344,8 +3353,8 @@
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: var(--lp-accent);
-  color: var(--lp-text-inverse);
+  background: var(--lp-coral);
+  color: var(--lp-white-alpha-90);
   font-family: var(--lp-font-mono);
   font-size: 18px;
   font-weight: 800;
@@ -3480,14 +3489,15 @@
 .lp-theme05-toc-v2-list {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 12px;
+  min-height: 0;
 }
 
 .lp-theme05-toc-v2-item {
   display: flex;
   align-items: flex-start;
   gap: 18px;
-  padding: 20px 24px;
+  padding: 16px 20px;
   background: var(--lp-surface-solid);
   border: 1px solid var(--lp-border);
   border-radius: var(--lp-radius-lg);
@@ -3585,3 +3595,7 @@
   color: var(--lp-accent);
   background: var(--lp-overlay);
 }
+
+/* 对比度修复 #322（修订）：versus / metric 实际落在深 substrate（#15151A/#1E1E24）上，
+   故沿用 :root（dark 外观）自带的浅色 --lp-ink2/--lp-ink3 与 --lp-accent 眉标，
+   不再强制深灰（此前误判为浅底导致 4.5:1 不达标）。 */