@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/core/arc-orbit/ArcOrbit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { activateOnKeyboard } from '../../../utils/activateOnKeyboard';
 import {
   type ComputedRef,
   computed,
@@ -7,6 +8,8 @@ import {
   provide,
   ref,
   useSlots,
+  isVNode,
+  watch,
   type VNode,
 } from 'vue';
 
@@ -14,14 +17,10 @@ import {
   ARC_ORBIT_ROOT_KEY,
   createArcOrbitGeometry,
   DEFAULT_ARC_ORBIT_COLOR,
-  type IArcOrbitItem,
   type TArcOrbitPosition,
-} from '../../../utils/arcOrbit';
+} from '../../../utils/core/arc-orbit';
 import { useDiagramAutoScale } from '../../../utils/useDiagramAutoScale';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import ArcOrbitCallout from './ArcOrbitCallout.vue';
-import ArcOrbitContents from './ArcOrbitContents.vue';
-import ArcOrbitTitle from './ArcOrbitTitle.vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -32,8 +31,7 @@ export interface IArcOrbitProps {
   readonly position?: TArcOrbitPosition;
   readonly count?: number;
   readonly color?: string;
-  readonly title?: string;
-  readonly items?: readonly IArcOrbitItem[];
+  readonly title?: string | VNode;
   readonly animation?: boolean;
   readonly height?: number | string;
   readonly startDelay?: number;
@@ -54,7 +52,6 @@ const props = withDefaults(defineProps<IArcOrbitProps>(), {
   count: undefined,
   color: DEFAULT_ARC_ORBIT_COLOR,
   title: undefined,
-  items: undefined,
   animation: true,
   height: undefined,
   startDelay: undefined,
@@ -111,25 +108,6 @@ const resolvedStartDelay = computed(() => {
   return 0;
 });
 
-interface INamedComponent {
-  readonly name?: string;
-  readonly __name?: string;
-}
-
-function hasComponentName(type: unknown, name: string): boolean {
-  if (typeof type === 'object' && type !== null) {
-    const comp = type as INamedComponent;
-
-    return comp.name === name || comp.__name === name;
-  }
-
-  if (typeof type === 'function') {
-    return (type as { name?: string }).name === name;
-  }
-
-  return false;
-}
-
 function isSignificantNode(node: VNode): boolean {
   if (typeof node.type === 'symbol') {
     if (typeof node.children === 'string' && !node.children.trim()) {
@@ -158,14 +136,6 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
   return result;
 }
 
-function isTitleNode(node: VNode): boolean {
-  return (
-    hasComponentName(node.type, 'ArcOrbitTitle') ||
-    hasComponentName(node.type, 'ArcComparisonTitle') ||
-    node.type === ArcOrbitTitle
-  );
-}
-
 const defaultNodes = computed(() => {
   if (!slots.default) {
     return [];
@@ -174,14 +144,6 @@ const defaultNodes = computed(() => {
   return flattenVNodes(slots.default());
 });
 
-const titleNode = computed(() => {
-  return defaultNodes.value.find(isTitleNode);
-});
-
-const bodyNodes = computed(() => {
-  return defaultNodes.value.filter((node) => !isTitleNode(node));
-});
-
 const resolvedCount = computed(() => {
   if (props.count === 4 || (props.count as unknown) === '4') {
     return 4;
@@ -219,6 +181,7 @@ const registerCallout = (id?: symbol): number | ComputedRef<number> => {
     if (!registeredCalloutIds.value.includes(id)) {
       registeredCalloutIds.value.push(id);
     }
+
     return computed(() => registeredCalloutIds.value.indexOf(id));
   }
 
@@ -233,11 +196,21 @@ const unregisterCallout = (id: symbol): void => {
   );
 };
 
-const currentTitle = ref<string>(props.title ?? 'Add Topic\nTitle');
+const currentTitle = ref<string>(
+  typeof props.title === 'string' ? props.title : '',
+);
+watch(
+  () => props.title,
+  (title) => {
+    currentTitle.value = typeof title === 'string' ? title : '';
+  },
+);
+
+const orbitColor = computed(() => props.color ?? DEFAULT_ARC_ORBIT_COLOR);
 
 provide(ARC_ORBIT_ROOT_KEY, {
   position: computed(() => props.position ?? 'left'),
-  color: computed(() => props.color ?? DEFAULT_ARC_ORBIT_COLOR),
+  color: orbitColor,
   pointsCount: resolvedCount,
   geo,
   animation: isAnimated,
@@ -249,7 +222,7 @@ provide(ARC_ORBIT_ROOT_KEY, {
   registerCallout,
   unregisterCallout,
   edgeOffset: computed(() => props.edgeOffset ?? 30),
-  items: computed(() => props.items),
+  items: computed(() => []),
 });
 
 const { resolvedScale, containerHeight } = useDiagramAutoScale({
@@ -284,6 +257,12 @@ const resolvedHeightStyle = computed(() => {
   return undefined;
 });
 
+const customColor = computed(() => {
+  return props.color && props.color !== DEFAULT_ARC_ORBIT_COLOR
+    ? props.color
+    : undefined;
+});
+
 const hubStyle = computed(() => {
   const hubR = geo.value.hubRadius;
   const centerY = geo.value.hubCenter.y;
@@ -299,7 +278,7 @@ const hubStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit w-full flex-1 flex flex-col justify-center select-none font-sans relative min-h-0',
+  'alpha-arc-orbit w-full flex-1 flex flex-col justify-center select-none font-sans relative min-h-0 border-0 p-0 m-0 min-w-0 bg-transparent',
 );
 
 function handleClick(event: MouseEvent): void {
@@ -308,8 +287,9 @@ function handleClick(event: MouseEvent): void {
 </script>
 
 <template>
-  <div
+  <fieldset
     ref="rootRef"
+    aria-label="Arc orbit diagram"
     v-bind="forwardedAttrs()"
     :class="[
       className(),
@@ -319,15 +299,16 @@ function handleClick(event: MouseEvent): void {
     :data-position="props.position"
     :style="{
       height: resolvedHeightStyle,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      '--arc-orbit-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-orbit-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-orbit-accent': customColor,
+      '--alpha-arc-orbit-title': customColor,
     }"
     @click="handleClick"
+    @keydown="activateOnKeyboard"
   >
     <!-- Relative stage container -->
     <div
-      class="alpha-arc-orbit__stage relative flex items-center justify-center overflow-visible flex-shrink-0"
+      class="alpha-arc-orbit__stage relative flex items-center justify-center overflow-visible shrink-0"
       :style="{
         width: `${props.viewBoxWidth}px`,
         height: `${props.viewBoxHeight}px`,
@@ -337,13 +318,19 @@ function handleClick(event: MouseEvent): void {
     >
       <!-- Base SVG Layer -->
       <svg
+        aria-hidden="true"
         class="alpha-arc-orbit__svg absolute inset-0 w-full h-full pointer-events-none overflow-visible"
         :viewBox="`0 0 ${props.viewBoxWidth} ${props.viewBoxHeight}`"
         xmlns="http://www.w3.org/2000/svg"
       >
         <defs>
           <clipPath :id="clipId">
-            <rect x="0" y="0" :width="props.viewBoxWidth" :height="props.viewBoxHeight" />
+            <rect
+              x="0"
+              y="0"
+              :width="props.viewBoxWidth"
+              :height="props.viewBoxHeight"
+            />
           </clipPath>
         </defs>
         <!-- Semicircular Hub Background -->
@@ -357,8 +344,8 @@ function handleClick(event: MouseEvent): void {
           >
             <path
               :d="geo.hubPath"
-              fill="#f1f3f6"
-              class="transition-colors duration-300 dark:fill-slate-800/80"
+              fill="var(--alpha-arc-orbit-hub-fill)"
+              class="transition-colors duration-300"
             />
           </g>
         </g>
@@ -373,66 +360,60 @@ function handleClick(event: MouseEvent): void {
           <path
             :d="geo.arcPath"
             fill="none"
-            stroke="#cbd5e1"
+            stroke="var(--alpha-arc-orbit-guide-stroke)"
             stroke-width="1.5"
-            class="transition-colors duration-300 dark:stroke-slate-700"
+            class="transition-colors duration-300"
           />
           <circle
             :cx="geo.topDot.x"
             :cy="geo.topDot.y"
             :r="geo.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-orbit-guide-dot)"
           />
           <circle
             :cx="geo.bottomDot.x"
             :cy="geo.bottomDot.y"
             :r="geo.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-orbit-guide-dot)"
           />
         </g>
       </svg>
       <!-- Hub Title Display -->
-      <div
-        class="alpha-arc-orbit__hub-title absolute flex items-center justify-center z-10 pointer-events-auto"
+      <h3
+        class="alpha-arc-orbit__hub-title absolute flex items-center justify-center z-10 pointer-events-auto font-sans font-bold text-center px-2 leading-tight select-none tracking-tight whitespace-pre-line text-(--alpha-arc-orbit-title)"
         :class="`alpha-arc-orbit__hub-title--${props.position}`"
         :style="hubStyle"
       >
-        <component :is="titleNode" v-if="titleNode" />
-        <ArcOrbitTitle v-else-if="props.title">
-          {{ props.title }}
-        </ArcOrbitTitle>
-        <ArcOrbitTitle v-else />
-      </div>
+        <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>
+      </h3>
       <!-- Contents & Callouts Layer -->
-      <div class="alpha-arc-orbit__contents-wrapper absolute inset-0 w-full h-full pointer-events-none">
-        <template v-if="bodyNodes.length > 0">
-          <component :is="node" v-for="(node, i) in bodyNodes" :key="i" />
-        </template>
-        <ArcOrbitContents v-else>
-          <ArcOrbitCallout
-            v-for="idx in resolvedCount"
-            :key="idx"
-            :index="idx - 1"
-          />
-        </ArcOrbitContents>
+      <div
+        class="alpha-arc-orbit__contents-wrapper absolute inset-0 w-full h-full pointer-events-none"
+      >
+        <component :is="node" v-for="(node, i) in defaultNodes" :key="i" />
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style scoped>
 .alpha-arc-orbit--animated.alpha-arc-orbit__hub--left {
-  animation: arc-orbit-hub-left-in 550ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 30ms) both;
+  animation: arc-orbit-hub-left-in 550ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 30ms) both;
 }
 
 .alpha-arc-orbit--animated.alpha-arc-orbit__hub--right {
-  animation: arc-orbit-hub-right-in 550ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 30ms) both;
+  animation: arc-orbit-hub-right-in 550ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 30ms) both;
 }
 
 .alpha-arc-orbit--animated.alpha-arc-orbit__arc {
-  animation: arc-orbit-line-fade 500ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 100ms) both;
+  animation: arc-orbit-line-fade 500ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 100ms) both;
 }
 
 @keyframes arc-orbit-hub-left-in {

package/components/core/arc-orbit/ArcOrbitBadge.vue

@@ -4,7 +4,7 @@ import { computed, inject } from 'vue';
 import {
   ARC_ORBIT_CALLOUT_KEY,
   DEFAULT_ARC_ORBIT_COLOR,
-} from '../../../utils/arcOrbit';
+} from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -43,24 +43,22 @@ const badgeStyle = computed(() => {
   return {
     width: `${props.size}px`,
     height: `${props.size}px`,
-    backgroundColor: badgeColor.value,
-    fontSize: `${Math.round(props.size * 0.42)}px`,
-    fontFamily:
-      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    ...(badgeColor.value !== DEFAULT_ARC_ORBIT_COLOR
+      ? { '--alpha-arc-orbit-accent': badgeColor.value }
+      : {}),
+    ...(props.size !== 52
+      ? { fontSize: `${Math.round(props.size * 0.42)}px` }
+      : {}),
   };
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit-badge rounded-full flex items-center justify-center font-bold text-white shadow-md select-none flex-shrink-0 transition-transform duration-300',
+  'alpha-arc-orbit-badge rounded-full flex items-center justify-center font-sans font-bold text-[22px] bg-(--alpha-arc-orbit-accent) text-(--alpha-arc-orbit-badge) shadow-md select-none shrink-0 transition-transform duration-300',
 );
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :style="badgeStyle"
-  >
+  <div v-bind="forwardedAttrs()" :class="className()" :style="badgeStyle">
     <slot>{{ badgeId }}</slot>
   </div>
 </template>

package/components/core/arc-orbit/ArcOrbitCallout.vue

@@ -14,10 +14,9 @@ import {
   ARC_ORBIT_ROOT_KEY,
   DEFAULT_ARC_ORBIT_COLOR,
   DEFAULT_ARC_ORBIT_ITEMS,
-  type IArcOrbitItem,
   type IResolvedArcOrbitItem,
   type TArcOrbitPosition,
-} from '../../../utils/arcOrbit';
+} from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcOrbitBadge from './ArcOrbitBadge.vue';
 import ArcOrbitContent from './ArcOrbitContent.vue';
@@ -32,8 +31,6 @@ export interface IArcOrbitCalloutProps {
   readonly position?: TArcOrbitPosition;
   readonly index?: number;
   readonly id?: string | number;
-  readonly title?: string;
-  readonly description?: string;
   readonly color?: string;
   readonly textColor?: string;
   readonly textGap?: number;
@@ -43,8 +40,6 @@ const props = withDefaults(defineProps<IArcOrbitCalloutProps>(), {
   position: undefined,
   index: undefined,
   id: undefined,
-  title: undefined,
-  description: undefined,
   color: undefined,
   textColor: undefined,
   textGap: undefined,
@@ -111,9 +106,8 @@ const activeItem = computed<IResolvedArcOrbitItem>(() => {
   const defaultColor = rootContext?.color.value ?? DEFAULT_ARC_ORBIT_COLOR;
 
   const id = props.id ?? customItem?.id ?? defaultItem.id;
-  const title = props.title ?? customItem?.title ?? defaultItem.title;
-  const description =
-    props.description ?? customItem?.description ?? defaultItem.description;
+  const title = '';
+  const description = '';
   const color =
     props.color ?? customItem?.color ?? defaultColor ?? defaultItem.color;
   const textColor =
@@ -302,15 +296,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     <!-- Left position: [Badge] [Heading + Content] -->
     <template v-if="!isRight">
       <component :is="badgeNode" v-if="badgeNode" />
-      <ArcOrbitBadge v-else />
       <div
         class="flex flex-col items-start text-left min-w-0 pt-0.5"
         :style="textStyle"
       >
         <component :is="headingNode" v-if="headingNode" />
-        <ArcOrbitHeading v-else />
         <component :is="contentNode" v-if="contentNode" />
-        <ArcOrbitContent v-else />
         <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
       </div>
     </template>
@@ -321,59 +312,66 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         :style="textStyle"
       >
         <component :is="headingNode" v-if="headingNode" />
-        <ArcOrbitHeading v-else />
         <component :is="contentNode" v-if="contentNode" />
-        <ArcOrbitContent v-else />
         <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
       </div>
       <component :is="badgeNode" v-if="badgeNode" />
-      <ArcOrbitBadge v-else />
     </template>
   </div>
 </template>
 
 <style scoped>
-.alpha-arc-orbit-callout :deep(p),
-.alpha-arc-orbit-callout :deep(h1),
-.alpha-arc-orbit-callout :deep(h2),
-.alpha-arc-orbit-callout :deep(h3),
-.alpha-arc-orbit-callout :deep(h4),
-.alpha-arc-orbit-callout :deep(h5),
-.alpha-arc-orbit-callout :deep(h6) {
-  margin: 0;
-  padding: 0;
+@layer alpha-theme-tokens {
+  .alpha-arc-orbit-callout :deep(p),
+  .alpha-arc-orbit-callout :deep(h1),
+  .alpha-arc-orbit-callout :deep(h2),
+  .alpha-arc-orbit-callout :deep(h3),
+  .alpha-arc-orbit-callout :deep(h4),
+  .alpha-arc-orbit-callout :deep(h5),
+  .alpha-arc-orbit-callout :deep(h6) {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--left-0 {
-  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 120ms) both;
+  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 120ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--left-1 {
-  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 200ms) both;
+  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 200ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--left-2 {
-  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 280ms) both;
+  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 280ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--left-3 {
-  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 360ms) both;
+  animation: arc-orbit-fade-left 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 360ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--right-0 {
-  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 120ms) both;
+  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 120ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--right-1 {
-  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 200ms) both;
+  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 200ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--right-2 {
-  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 280ms) both;
+  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 280ms) both;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--right-3 {
-  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-orbit-start-delay, 0ms) + 360ms) both;
+  animation: arc-orbit-fade-right 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-orbit-start-delay, 0ms) + 360ms) both;
 }
 
 @keyframes arc-orbit-fade-left {

package/components/core/arc-orbit/ArcOrbitContent.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import {
-  ARC_ORBIT_CALLOUT_KEY,
-  DEFAULT_LOREM_TEXT,
-} from '../../../utils/arcOrbit';
+import { ARC_ORBIT_CALLOUT_KEY } from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -32,21 +29,18 @@ const contentStyle = computed(() => {
   }
 
   return {
-    color: contentColor.value,
+    '--alpha-arc-orbit-content': contentColor.value,
+    '--alpha-arc-comparison-content': contentColor.value,
   };
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit-content font-sans text-[0.78rem] leading-[1.3] text-slate-600 dark:text-slate-300 opacity-90',
+  'alpha-arc-orbit-content font-sans leading-[1.3] text-(--alpha-arc-orbit-content) opacity-90',
 );
 </script>
 
 <template>
-  <p
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :style="contentStyle"
-  >
-    <slot>{{ calloutContext?.item.value.description ?? DEFAULT_LOREM_TEXT }}</slot>
+  <p v-bind="forwardedAttrs()" :class="className()" :style="contentStyle">
+    <slot />
   </p>
 </template>

package/components/core/arc-orbit/ArcOrbitHeading.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import {
-  ARC_ORBIT_CALLOUT_KEY,
-  DEFAULT_ARC_ORBIT_COLOR,
-} from '../../../utils/arcOrbit';
+import { ARC_ORBIT_CALLOUT_KEY } from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -27,29 +24,34 @@ const headingColor = computed(() => {
     props.color ??
     calloutContext?.item.value.color ??
     calloutContext?.color.value ??
-    DEFAULT_ARC_ORBIT_COLOR
+    undefined
   );
 });
 
 const headingStyle = computed(() => {
+  if (!headingColor.value) {
+    return undefined;
+  }
+
   return {
     color: headingColor.value,
-    fontFamily:
-      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    '--alpha-arc-orbit-heading': headingColor.value,
+    '--alpha-arc-comparison-heading': headingColor.value,
   };
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit-heading font-bold text-[1.05rem] leading-tight mb-0.5 tracking-tight',
+  'alpha-arc-orbit-heading mb-0.5 font-sans font-bold leading-tight tracking-tight text-(--alpha-arc-orbit-heading)',
 );
 </script>
 
 <template>
-  <h3
+  <h4
+    v-if="$slots.default"
     v-bind="forwardedAttrs()"
     :class="className()"
     :style="headingStyle"
   >
-    <slot>{{ calloutContext?.item.value.title ?? 'Add Text Here' }}</slot>
-  </h3>
+    <slot>{{ '' }}</slot>
+  </h4>
 </template>

package/components/core/arc-orbit/style.css

@@ -0,0 +1,20 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-arc-orbit-heading: var(--alpha-arc-orbit-accent);
+    --alpha-arc-orbit-title: var(--alpha-arc-orbit-accent);
+    --alpha-arc-orbit-accent: #ea580c;
+    --alpha-arc-orbit-badge: #ffffff;
+    --alpha-arc-orbit-content: var(--alpha-foreground-primary, #475569);
+    --alpha-arc-orbit-guide-dot: #94a3b8;
+    --alpha-arc-orbit-guide-stroke: var(--alpha-stroke-primary);
+    --alpha-arc-orbit-hub-fill: #f1f3f6;
+  }
+
+  .dark,
+  html.dark {
+    --alpha-arc-orbit-guide-dot: #475569;
+    --alpha-arc-orbit-guide-stroke: #334155;
+    --alpha-arc-orbit-hub-fill: #1e293bcc;
+  }
+}

package/components/core/style.css

@@ -0,0 +1,9 @@
+@import './arc-orbit/style.css';
+@import './thanks/style.css';
+
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-qna-color: var(--alpha-foreground-primary, #2b90b6);
+    --alpha-reflected-title-color: var(--alpha-foreground-primary, #a5f3fc);
+  }
+}