@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/README.md

@@ -6,7 +6,7 @@ For the pre-refactor inventory of all components, props, slots, layouts, and
 migration-sensitive behavior, see [Component baseline](./COMPONENTS_BASELINE.md).
 
 For Alpha's light-only academic styling, combine this addon with
-`@alphacifer/slidev-theme-academic`.
+`@alphacifer/slidev-academic-theme`.
 
 ## Installation
 
@@ -21,10 +21,71 @@ addons:
 ---
 ```
 
+## Shared color tokens
+
+The addon installs `@alphacifer/slidev-core-theme` automatically for shared
+CSS custom properties, typography defaults, and semantic UnoCSS utilities. The
+tokens live in a low-priority cascade layer, so theme and deck values override
+them. Set a palette in your deck's `style.css`:
+
+```css
+:root {
+  --alpha-primary: #f8fafc;
+  --alpha-foreground-primary: #0f172a;
+  --alpha-foreground-accent: #0284c7;
+  --alpha-stroke-primary: #cbd5e1;
+}
+```
+
+Use `bg-primary`, `text-foreground-primary`, `text-foreground-accent`,
+`border-stroke-primary`, `fill-primary`, and `stroke-stroke-primary` in slide
+markup. The utilities have light palette fallbacks if a theme does not define
+the variables. The Academic Theme sets its own values for the same tokens.
+
+Components expose short, namespaced variables such as `--alpha-arc-arrow-process-heading`
+and `--alpha-horizontal-card-accent`. Each compound component has one `style.css` beside
+its Vue files. For example, `components/process/arc-arrow-process/style.css`
+defines the colors for the process, arrow, icon, and heading parts together.
+Standalone components use a file such as `QnA.style.css`.
+
+The package's `style.css` imports all component palettes. Import it when using
+components outside Slidev:
+
+```ts
+import '@alphacifer/slidev-addon-theme/style.css';
+```
+
+Shared colors are aliased inside the component palette, and component variables
+can be overridden globally or on a specific instance:
+
+```css
+:root {
+  --alpha-arc-orbit-guide-stroke: var(--alpha-stroke-primary);
+  --alpha-arc-comparison-guide-stroke: #94a3b8;
+  --alpha-horizontal-card-accent: #ea583a;
+}
+
+.custom-card {
+  --alpha-horizontal-card-accent: #2563eb;
+  --alpha-horizontal-card-icon-bg: #dbeafe;
+}
+
+.custom-pyramid {
+  --alpha-square-pyramid-accent: #7c3aed;
+  --alpha-square-pyramid-stack-1-color: #a78bfa;
+}
+```
+
+Component color props still take precedence over CSS variable defaults.
+Variables with an `initial` default use the component's runtime fallback—for
+example, an icon background derived from its color prop. Indexed palette
+overrides such as `--alpha-square-pyramid-stack-1-color` and
+`--alpha-table-comparison-col-1-background` also keep their item-specific fallbacks.
+
 ## Core
 
 - Components: `Date`, `QnA`, `Quote`, `ReflectedTitle`, `Speaker`
-- Layouts: `arc-toc`, `bg-center`, `table-of-contents`
+- Layouts: `arc-toc`, `bg-center`
 
 ## Shifting heading
 
@@ -34,97 +95,95 @@ addons:
 
 ## Thanks
 
-- Components: `ThanksContent`, `ThanksOutlineSquare`, `ThanksSquare`
+- Components: `SquareThanks`, `ThanksOutlineSquare`, `ThanksSquare`
 - Layout: `thanks`
 
-## Hex triad
+## Hexagon triad
 
-- Components: `HexTriad`, `HexTriadCallout`, `HexTriadBadge`, `HexTriadHeading`, `HexTriadContent`
+- Components: `HexagonTriad`, `HexagonTriadCallout`, `HexagonTriadBadge`, `HexagonTriadHeading`, `HexagonTriadContent`
 
 ```vue
-<HexTriad>
-  <HexTriadCallout>
-    <HexTriadBadge>01</HexTriadBadge>
-    <HexTriadHeading>Performance</HexTriadHeading>
-    <HexTriadContent>Fast builds, instant feedback, and zero-overhead runtime.</HexTriadContent>
-  </HexTriadCallout>
-  <HexTriadCallout>
-    <HexTriadBadge>02</HexTriadBadge>
-    <HexTriadHeading>Reliability</HexTriadHeading>
-    <HexTriadContent>Strict type safety paired with deterministic test suites.</HexTriadContent>
-  </HexTriadCallout>
-  <HexTriadCallout>
-    <HexTriadBadge>03</HexTriadBadge>
-    <HexTriadHeading>Scalability</HexTriadHeading>
-    <HexTriadContent>Seamless growth across packages, tools, and workflows.</HexTriadContent>
-  </HexTriadCallout>
-</HexTriad>
+<HexagonTriad>
+  <HexagonTriadCallout>
+    <HexagonTriadBadge>01</HexagonTriadBadge>
+    <HexagonTriadHeading>Performance</HexagonTriadHeading>
+    <HexagonTriadContent>Fast builds, instant feedback, and zero-overhead runtime.</HexagonTriadContent>
+  </HexagonTriadCallout>
+  <HexagonTriadCallout>
+    <HexagonTriadBadge>02</HexagonTriadBadge>
+    <HexagonTriadHeading>Reliability</HexagonTriadHeading>
+    <HexagonTriadContent>Strict type safety paired with deterministic test suites.</HexagonTriadContent>
+  </HexagonTriadCallout>
+  <HexagonTriadCallout>
+    <HexagonTriadBadge>03</HexagonTriadBadge>
+    <HexagonTriadHeading>Scalability</HexagonTriadHeading>
+    <HexagonTriadContent>Seamless growth across packages, tools, and workflows.</HexagonTriadContent>
+  </HexagonTriadCallout>
+</HexagonTriad>
 ```
 
 ## Gear triad
 
-- Components: `GearTriad`, `GearTriadCallout`, `GearTriadHeading`, `GearTriadDescription`, `GearTriadContents`, `GearTriadContent`, `GearTriadIcon`, `GearTriadCenter`
+- Components: `GearTriad`, `GearTriadCallout`, `GearTriadHeading`, `GearTriadContent`, `GearTriadDetails`, `GearTriadDetailsHeading`, `GearTriadDetailsContent`, `GearTriadDetail`, `GearTriadIcon`, `GearTriadCenter`
 
 ```vue
 <GearTriad>
   <GearTriadCallout>
     <GearTriadHeading>Option 1</GearTriadHeading>
-    <GearTriadDescription>
-      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
-    </GearTriadDescription>
+    <GearTriadContent>
+      Formulate testable research questions and theoretical models.
+    </GearTriadContent>
   </GearTriadCallout>
   <GearTriadCallout>
     <GearTriadHeading>Option 2</GearTriadHeading>
-    <GearTriadDescription>
-      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
-    </GearTriadDescription>
+    <GearTriadContent>
+      Execute controlled investigations with automated measurement pipelines.
+    </GearTriadContent>
   </GearTriadCallout>
   <GearTriadCallout>
     <GearTriadHeading>Option 3</GearTriadHeading>
-    <GearTriadDescription>
-      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
-    </GearTriadDescription>
+    <GearTriadContent>
+      Subject findings to reproducible peer review and empirical analysis.
+    </GearTriadContent>
   </GearTriadCallout>
 </GearTriad>
 ```
 
-## Horiz card
+## Horizontal card
 
-- Components: `HorizCard`, `HorizCardBadge`, `HorizCardHeading`, `HorizCardContent`, `HorizCardIcon`
+- Components: `HorizontalCard`, `HorizontalCardBadge`, `HorizontalCardContent`, `HorizontalCardIcon`
 
 ```vue
-<!-- Self-contained props usage with optional icon -->
-<HorizCard
+<HorizontalCard
   step="01"
-  title="Lorem Ipsum"
-  description="Lorem ipsum dolor sit amet, nibh est. A magna maecenas, quam magna nec quis."
-/>
+  title="Discovery"
+>
+  <HorizontalCardContent>Explore ideas and define requirements.</HorizontalCardContent>
+</HorizontalCard>
 
 <!-- With custom icon and color -->
-<HorizCard
+<HorizontalCard
   step="02"
   title="Discovery"
-  description="Explore ideas and prototype user experiences."
   color="#2563eb"
 >
   <template #icon>
     <div class="i-carbon-search text-4xl" />
   </template>
-</HorizCard>
+  <HorizontalCardContent>Explore ideas and prototype user experiences.</HorizontalCardContent>
+</HorizontalCard>
 ```
 
 ## Arc comparison
 
-- Components: `ArcComparison`, `ArcComparisonLeft`, `ArcComparisonRight`, `ArcComparisonTitle`, `ArcComparisonContents`, `ArcComparisonOrbit`, `ArcComparisonBadge`, `ArcComparisonHeading`, `ArcComparisonContent`
+- Components: `ArcComparison`, `ArcComparisonLeft`, `ArcComparisonRight`, `ArcComparisonOrbit`, `ArcComparisonBadge`, `ArcComparisonHeading`, `ArcComparisonContent`
 
 ```vue
-<!-- Self-contained mockup default (3 points) -->
-
 <!-- 4 points mode -->
 <ArcComparison>
   <ArcComparisonLeft color="#ea580c">
-    <ArcComparisonTitle>Traditional<br />Monolith</ArcComparisonTitle>
-    <ArcComparisonContents>
+    <template #title>Traditional<br />Monolith</template>
+
       <ArcComparisonOrbit>
         <ArcComparisonBadge>01</ArcComparisonBadge>
         <ArcComparisonHeading>Coupled State</ArcComparisonHeading>
@@ -146,12 +205,12 @@ addons:
           Unchecked memory leaks or crashes can bring down the entire system.
         </ArcComparisonContent>
       </ArcComparisonOrbit>
-    </ArcComparisonContents>
+
   </ArcComparisonLeft>
 
   <ArcComparisonRight color="#0284c7">
-    <ArcComparisonTitle>Distributed<br />Microservices</ArcComparisonTitle>
-    <ArcComparisonContents>
+    <template #title>Distributed<br />Microservices</template>
+
       <ArcComparisonOrbit>
         <ArcComparisonBadge>01</ArcComparisonBadge>
         <ArcComparisonHeading>Bounded Context</ArcComparisonHeading>
@@ -173,39 +232,38 @@ addons:
           Failures remain localized without cascading across service domains.
         </ArcComparisonContent>
       </ArcComparisonOrbit>
-    </ArcComparisonContents>
+
   </ArcComparisonRight>
 </ArcComparison>
 ```
 
 ## Table comparison
 
-- Components: `TableComparison`, `TableComparisonCols`, `TableComparisonCol`, `TableComparisonRows`, `TableComparisonRow`, `TableComparisonCell`
+- Components: `TableComparison`, `TableComparisonColumns`, `TableComparisonColumn`, `TableComparisonRows`, `TableComparisonRow`, `TableComparisonCell`
 
 ```vue
-<!-- Self-contained mockup default (5 columns x 6 rows) -->
-<TableComparison />
-
 <!-- Custom compound comparison structure -->
 <TableComparison>
-  <TableComparisonCols>
-    <TableComparisonCol color="#ff0000">
+  <TableComparisonColumns>
+    <TableComparisonColumn color="#ff0000">
       Column 1
-    </TableComparisonCol>
-    <TableComparisonCol color="#00ff00">
+    </TableComparisonColumn>
+    <TableComparisonColumn color="#00ff00">
       Column 2
-    </TableComparisonCol>
-    <TableComparisonCol color="#0000ff">
+    </TableComparisonColumn>
+    <TableComparisonColumn color="#0000ff">
       Column 3
-    </TableComparisonCol>
-  </TableComparisonCols>
+    </TableComparisonColumn>
+  </TableComparisonColumns>
   <TableComparisonRows>
-    <TableComparisonRow title="Row 1">
+    <TableComparisonRow>
+      <template #heading>Row 1</template>
       <TableComparisonCell>Row 1, Cell 1</TableComparisonCell>
       <TableComparisonCell>Row 1, Cell 2</TableComparisonCell>
       <TableComparisonCell>Row 1, Cell 3</TableComparisonCell>
     </TableComparisonRow>
-    <TableComparisonRow title="Row 2">
+    <TableComparisonRow>
+      <template #heading>Row 2</template>
       <TableComparisonCell>Row 2, Cell 1</TableComparisonCell>
       <TableComparisonCell>Row 2, Cell 2</TableComparisonCell>
       <TableComparisonCell>Row 2, Cell 3</TableComparisonCell>
@@ -216,30 +274,30 @@ addons:
 
 ## Circular pyramid
 
-- Components: `CircularPyramid`, `CircularPyramidStack`, `CircularPyramidStackTitle`, `CircularPyramidStackContent`
+- Components: `CircularPyramid`, `CircularPyramidStack`, `CircularPyramidStackHeading`, `CircularPyramidStackContent`
 
 ```vue
 <CircularPyramid>
   <CircularPyramidStack>
-    <CircularPyramidStackTitle>01 Strategy</CircularPyramidStackTitle>
+    <CircularPyramidStackHeading>01 Strategy</CircularPyramidStackHeading>
     <CircularPyramidStackContent>
       Define clear technical north stars, design systems, and cross-team alignment.
     </CircularPyramidStackContent>
   </CircularPyramidStack>
   <CircularPyramidStack>
-    <CircularPyramidStackTitle>02 Architecture</CircularPyramidStackTitle>
+    <CircularPyramidStackHeading>02 Architecture</CircularPyramidStackHeading>
     <CircularPyramidStackContent>
       Establish domain boundaries, type safety contracts, and scalable infrastructure.
     </CircularPyramidStackContent>
   </CircularPyramidStack>
   <CircularPyramidStack>
-    <CircularPyramidStackTitle>03 Implementation</CircularPyramidStackTitle>
+    <CircularPyramidStackHeading>03 Implementation</CircularPyramidStackHeading>
     <CircularPyramidStackContent>
       Build high-performance components with smooth motion and responsive layout.
     </CircularPyramidStackContent>
   </CircularPyramidStack>
   <CircularPyramidStack>
-    <CircularPyramidStackTitle>04 Verification</CircularPyramidStackTitle>
+    <CircularPyramidStackHeading>04 Verification</CircularPyramidStackHeading>
     <CircularPyramidStackContent>
       Validate behavior with rigorous unit suites, formatting, and live slide builds.
     </CircularPyramidStackContent>
@@ -256,30 +314,30 @@ addons:
 
 ## Square pyramid
 
-- Components: `SquarePyramid`, `SquarePyramidStack`, `SquarePyramidStackTitle`, `SquarePyramidStackContent`
+- Components: `SquarePyramid`, `SquarePyramidStack`, `SquarePyramidStackHeading`, `SquarePyramidStackContent`
 
 ```vue
 <SquarePyramid>
   <SquarePyramidStack>
-    <SquarePyramidStackTitle>01 Strategy</SquarePyramidStackTitle>
+    <SquarePyramidStackHeading>01 Strategy</SquarePyramidStackHeading>
     <SquarePyramidStackContent>
       Define clear technical north stars, design systems, and cross-team alignment.
     </SquarePyramidStackContent>
   </SquarePyramidStack>
   <SquarePyramidStack>
-    <SquarePyramidStackTitle>02 Architecture</SquarePyramidStackTitle>
+    <SquarePyramidStackHeading>02 Architecture</SquarePyramidStackHeading>
     <SquarePyramidStackContent>
       Establish domain boundaries, type safety contracts, and scalable infrastructure.
     </SquarePyramidStackContent>
   </SquarePyramidStack>
   <SquarePyramidStack>
-    <SquarePyramidStackTitle>03 Implementation</SquarePyramidStackTitle>
+    <SquarePyramidStackHeading>03 Implementation</SquarePyramidStackHeading>
     <SquarePyramidStackContent>
       Build high-performance components with smooth motion and responsive layout.
     </SquarePyramidStackContent>
   </SquarePyramidStack>
   <SquarePyramidStack>
-    <SquarePyramidStackTitle>04 Verification</SquarePyramidStackTitle>
+    <SquarePyramidStackHeading>04 Verification</SquarePyramidStackHeading>
     <SquarePyramidStackContent>
       Validate behavior with rigorous unit suites, formatting, and live slide builds.
     </SquarePyramidStackContent>

package/components/card/chevron-card/ChevronCard.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { computed, Fragment, provide, useSlots, type VNode } from 'vue';
-
-import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
+import {
+  computed,
+  Fragment,
+  isVNode,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../../utils/card/chevron-card';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ChevronCardBadge from './ChevronCardBadge.vue';
 import ChevronCardContent from './ChevronCardContent.vue';
-import ChevronCardHeading from './ChevronCardHeading.vue';
 
 defineOptions({
   name: 'ChevronCard',
@@ -13,6 +19,7 @@ defineOptions({
 });
 
 export interface IChevronCardProps {
+  readonly title?: string | VNode;
   readonly step?: string | number;
   readonly icon?: string | object;
   readonly color?: string;
@@ -28,11 +35,12 @@ export interface IChevronCardProps {
 }
 
 const props = withDefaults(defineProps<IChevronCardProps>(), {
+  title: undefined,
   step: '01',
   icon: undefined,
-  color: '#f59e0b',
+  color: 'var(--alpha-chevron-card-accent)',
   width: undefined,
-  cardBg: '#f5f5f7',
+  cardBg: 'var(--alpha-chevron-card-bg)',
   height: undefined,
   textColor: undefined,
   animation: true,
@@ -77,13 +85,6 @@ function isBadgeNode(node: VNode): boolean {
   );
 }
 
-function isHeadingNode(node: VNode): boolean {
-  return (
-    hasComponentName(node.type, 'ChevronCardHeading') ||
-    node.type === ChevronCardHeading
-  );
-}
-
 function isContentNode(node: VNode): boolean {
   return (
     hasComponentName(node.type, 'ChevronCardContent') ||
@@ -103,17 +104,13 @@ const slottedBadge = computed(() => {
   return defaultNodes.value.find(isBadgeNode);
 });
 
-const slottedHeading = computed(() => {
-  return defaultNodes.value.find(isHeadingNode);
-});
-
 const slottedContent = computed(() => {
   return defaultNodes.value.find(isContentNode);
 });
 
 const otherSlottedNodes = computed(() => {
   return defaultNodes.value.filter((node) => {
-    return !isBadgeNode(node) && !isHeadingNode(node) && !isContentNode(node);
+    return !isBadgeNode(node) && !isContentNode(node);
   });
 });
 
@@ -121,8 +118,10 @@ const resolvedStep = computed(() => {
   return props.step;
 });
 
-const resolvedColor = computed(() => {
-  return props.color;
+const customColor = computed(() => {
+  return props.color !== 'var(--alpha-chevron-card-accent)'
+    ? props.color
+    : undefined;
 });
 
 const resolvedCardBg = computed(() => {
@@ -134,12 +133,12 @@ const resolvedTextColor = computed(() => {
 });
 
 const resolvedTitleColor = computed(() => {
-  return props.titleColor;
+  return props.titleColor ?? 'var(--alpha-chevron-card-title)';
 });
 
 provide(CHEVRON_CARD_KEY, {
   step: resolvedStep,
-  color: resolvedColor,
+  color: customColor,
   cardBg: resolvedCardBg,
   textColor: resolvedTextColor,
   titleColor: resolvedTitleColor,
@@ -176,19 +175,17 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       width: resolvedWidth,
       minHeight: resolvedHeight ?? '112px',
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
     }"
   >
     <!-- Chevron Step Badge Layer -->
-    <div class="flex-shrink-0 z-10 flex">
+    <div class="shrink-0 z-10 flex">
       <slot name="badge">
         <component :is="slottedBadge" v-if="slottedBadge" />
         <ChevronCardBadge
           v-else
           :step="resolvedStep"
           :icon="props.icon"
-          :color="resolvedColor"
+          :color="customColor"
           :width="props.chevronWidth"
           :notch-depth="props.notchDepth"
         />
@@ -196,18 +193,33 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     </div>
     <!-- Content Body Layer -->
     <div
-      class="flex-1 min-w-0 flex flex-col justify-center py-4 pr-6"
+      class="flex-1 min-w-0 flex flex-col justify-center py-4 pr-6 bg-(--alpha-chevron-card-bg)"
       :style="{
-        backgroundColor: resolvedCardBg,
+        '--alpha-chevron-card-bg':
+          props.cardBg !== 'var(--alpha-chevron-card-bg)'
+            ? resolvedCardBg
+            : undefined,
         borderRadius: `0 ${props.borderRadius}px ${props.borderRadius}px 0`,
         marginLeft: `-${props.notchDepth}px`,
         paddingLeft: `${props.notchDepth + 20}px`,
       }"
     >
-      <slot name="title">
-        <component :is="slottedHeading" v-if="slottedHeading" />
-      </slot>
-      <slot name="description">
+      <h4
+        v-if="$slots.title || props.title != null"
+        class="alpha-chevron-card-title font-bold uppercase tracking-wider leading-tight mb-1 select-none font-sans text-(--alpha-chevron-card-title)"
+        :style="
+          props.titleColor
+            ? { '--alpha-chevron-card-title': props.titleColor }
+            : undefined
+        "
+      >
+        <slot v-if="$slots.title" name="title" />
+        <component :is="props.title" v-else-if="isVNode(props.title)" />
+        <span v-else-if="typeof props.title === 'string'">{{
+          props.title
+        }}</span>
+      </h4>
+      <slot name="content">
         <component :is="slottedContent" v-if="slottedContent" />
       </slot>
       <component

package/components/card/chevron-card/ChevronCardBadge.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
+import { CHEVRON_CARD_KEY } from '../../../utils/card/chevron-card';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ChevronCardBadge',
+  inheritAttrs: false,
 });
 
 export interface IChevronCardBadgeProps {
@@ -27,18 +29,23 @@ const props = withDefaults(defineProps<IChevronCardBadgeProps>(), {
 
 const cardContext = inject(CHEVRON_CARD_KEY, undefined);
 
-const resolvedColor = computed(() => {
-  return props.color ?? cardContext?.color.value ?? '#f59e0b';
+const customColor = computed(() => {
+  return props.color ?? cardContext?.color.value;
 });
 
 const resolvedStep = computed(() => {
   return props.step ?? cardContext?.step.value ?? '01';
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-chevron-card-badge relative select-none shrink-0 flex items-center justify-center bg-(--alpha-chevron-card-badge-bg) text-(--alpha-chevron-card-badge-foreground)',
+);
 </script>
 
 <template>
   <div
-    class="alpha-chevron-card-badge relative select-none flex-shrink-0 flex items-center justify-center text-white"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :style="{
       width: `${props.width}px`,
       height: props.height
@@ -46,7 +53,7 @@ const resolvedStep = computed(() => {
           ? `${props.height}px`
           : props.height
         : '100%',
-      backgroundColor: resolvedColor,
+      '--alpha-chevron-card-badge-bg': customColor,
       clipPath: `polygon(0% 0%, calc(100% - ${props.notchDepth}px) 0%, 100% 50%, calc(100% - ${props.notchDepth}px) 100%, 0% 100%, ${props.notchDepth}px 50%)`,
     }"
   >
@@ -55,16 +62,15 @@ const resolvedStep = computed(() => {
         <component
           :is="props.icon"
           v-if="typeof props.icon === 'object'"
-          class="w-8 h-8 text-white"
+          class="w-8 h-8"
         />
         <span
           v-else-if="typeof props.icon === 'string'"
-          :class="[props.icon, 'text-3xl text-white inline-block']"
+          :class="[props.icon, 'text-3xl inline-block']"
         />
         <span
           v-else
           class="font-extrabold text-[32px] tracking-tight font-sans select-none"
-          style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"
         >
           {{ resolvedStep }}
         </span>

package/components/card/chevron-card/ChevronCardContent.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
+import { CHEVRON_CARD_KEY } from '../../../utils/card/chevron-card';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ChevronCardContent',
+  inheritAttrs: false,
 });
 
 export interface IChevronCardContentProps {
@@ -18,22 +20,22 @@ const props = withDefaults(defineProps<IChevronCardContentProps>(), {
 const cardContext = inject(CHEVRON_CARD_KEY, undefined);
 
 const contentColor = computed(() => {
-  return props.color ?? cardContext?.textColor.value ?? '#6b7280';
+  return props.color ?? cardContext?.textColor.value ?? undefined;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-chevron-card-content leading-[1.45] font-normal tracking-tight select-none font-sans text-(--alpha-chevron-card-content)',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-chevron-card-content text-[1rem] leading-[1.45] font-normal tracking-tight select-none font-sans"
-    :style="{
-      color: contentColor,
-      margin: 0,
-      padding: 0,
-      fontSize: '1rem',
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-    }"
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      contentColor ? { '--alpha-chevron-card-content': contentColor } : undefined
+    "
   >
     <slot />
-  </div>
+  </p>
 </template>

package/components/card/chevron-card/style.css

@@ -0,0 +1,12 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-chevron-card-accent: #f59e0b;
+    /* Resolved from the component accent or props unless overridden. */
+    --alpha-chevron-card-badge-bg: var(--alpha-chevron-card-accent);
+    --alpha-chevron-card-badge-foreground: #ffffff;
+    --alpha-chevron-card-bg: #f5f5f7;
+    --alpha-chevron-card-content: var(--alpha-foreground-primary, #6b7280);
+    --alpha-chevron-card-title: var(--alpha-foreground-primary, #4b5563);
+  }
+}