update at 2026-03-17 10:37:27

calendar/src/components/CalendarCard.vue

@@ -43,7 +43,6 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
       <div class="calendar-card__panel-header">
         <div>
           <p class="calendar-card__panel-title">{{ model.gregorianLabel }}</p>
-          <p class="calendar-card__panel-subtitle">{{ model.lunarYearLabel }}</p>
         </div>
         <div v-if="model.summaryBadges.length" class="calendar-card__badges">
           <span
@@ -98,13 +97,16 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
   grid-template-rows: auto 1fr;
   height: 100%;
   gap: 1rem;
-  padding: 1.28rem 1.28rem 1.16rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 }
 
 .calendar-card__hero {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 220px;
   align-items: flex-start;
-  justify-content: space-between;
   gap: 1rem;
 }
 
@@ -124,27 +126,24 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
 }
 
 .calendar-card__day {
-  font-family:
-    'Iowan Old Style',
-    'Baskerville',
-    serif;
-  font-size: 6.9rem;
+  font-family: var(--display-font);
+  font-size: calc(6.9rem * var(--theme-font-scale, 1));
   line-height: 0.88;
   letter-spacing: -0.08em;
-  color: #000000;
+  color: var(--ink);
 }
 
 .calendar-card__lunar-day,
 .calendar-card__weekday {
   margin: 0;
-  font-size: 1.88rem;
+  font-size: calc(1.88rem * var(--theme-font-scale, 1));
   line-height: 1.02;
-  color: #000000;
+  color: var(--ink);
   white-space: nowrap;
 }
 
 .calendar-card__weekday {
-  font-size: 1.88rem;
+  font-size: calc(1.88rem * var(--theme-font-scale, 1));
 }
 
 .calendar-card__panel {
@@ -153,9 +152,9 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
   gap: 0.55rem;
   min-height: 0;
   padding: 0.88rem 0.94rem 0.94rem;
-  border-radius: 1.25rem;
+  border-radius: var(--panel-radius);
   border: 2px solid var(--frame-stroke);
-  background: #ffffff;
+  background: var(--panel-background);
 }
 
 .calendar-card__panel-header {
@@ -165,20 +164,13 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
   gap: 1rem;
 }
 
-.calendar-card__panel-title,
-.calendar-card__panel-subtitle {
+.calendar-card__panel-title {
   margin: 0;
 }
 
 .calendar-card__panel-title {
-  font-size: 0.9rem;
-  color: #4c4c4c;
-}
-
-.calendar-card__panel-subtitle {
-  margin-top: 0.2rem;
-  font-size: 0.84rem;
-  color: #000000;
+  font-size: calc(0.9rem * var(--theme-font-scale, 1));
+  color: var(--muted-ink);
 }
 
 .calendar-card__badges {
@@ -191,11 +183,11 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
 .calendar-card__badge {
   padding: 0.14rem 0.46rem;
   border-radius: 999px;
-  font-size: 0.72rem;
+  font-size: calc(0.72rem * var(--theme-font-scale, 1));
   line-height: 1.2;
-  color: #000000;
+  color: var(--ink);
   border: 1.5px solid var(--frame-stroke);
-  background: #ffffff;
+  background: var(--badge-fill);
 }
 
 .calendar-card__grid {
@@ -212,8 +204,8 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
   display: grid;
   place-items: center;
   padding-bottom: 0.14rem;
-  font-size: 0.82rem;
-  color: #000000;
+  font-size: calc(0.82rem * var(--theme-font-scale, 1));
+  color: var(--ink);
 }
 
 .calendar-card__cell {
@@ -223,7 +215,7 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
   padding: 0.16rem 0 0.18rem;
   border-radius: 0.9rem;
   border: 1.5px solid transparent;
-  color: #000000;
+  color: var(--ink);
 }
 
 .calendar-card__cell-copy {
@@ -238,21 +230,21 @@ function subLabelTone(cell: CalendarModel['cells'][number]) {
 }
 
 .calendar-card__solar {
-  font-size: 0.98rem;
+  font-size: calc(0.98rem * var(--theme-font-scale, 1));
   line-height: 1.05;
 }
 
 .calendar-card__sub {
   max-width: 100%;
   overflow: hidden;
-  font-size: 0.84rem;
+  font-size: calc(0.84rem * var(--theme-font-scale, 1));
   line-height: 1;
-  color: #000000;
+  color: var(--ink);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .calendar-card__cell--muted {
-  border-color: rgba(139, 107, 71, 0.35);
+  border-color: var(--frame-muted);
 }
 </style>