@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/utils/facets/tetrad/rectangle-orbit-tetrad/context.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type {
+  IRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+} from './resolveRectangleOrbitTetradItems';
+
+export interface IRectangleOrbitTetradRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectangleOrbitTetradItem>;
+  readonly setCustomBadge?: (text: string | number) => void;
+}
+
+export interface IRectangleOrbitTetradRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly registerCallout: (
+    props?: IRectangleOrbitTetradItem,
+  ) => IRectangleOrbitTetradRegistration;
+  readonly items: ComputedRef<readonly IResolvedRectangleOrbitTetradItem[]>;
+}
+
+export interface IRectangleOrbitTetradCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectangleOrbitTetradItem>;
+}
+
+export const RECT_ORBIT_TETRAD_ROOT_KEY: InjectionKey<IRectangleOrbitTetradRootContext> =
+  Symbol('RECT_ORBIT_TETRAD_ROOT_KEY');
+
+export const RECT_ORBIT_TETRAD_CALLOUT_KEY: InjectionKey<IRectangleOrbitTetradCalloutContext> =
+  Symbol('RECT_ORBIT_TETRAD_CALLOUT_KEY');

package/utils/{rectOrbitTetrad/createRectOrbitTetradGeometry.ts → facets/tetrad/rectangle-orbit-tetrad/createRectangleOrbitTetradGeometry.ts}

@@ -11,7 +11,7 @@ export interface IRectOrbitBox {
   readonly height: number;
 }
 
-export interface IRectOrbitTetradCoordinates {
+export interface IRectangleOrbitTetradCoordinates {
   readonly centerX: number;
   readonly centerY: number;
   readonly arcPaths: readonly [string, string, string, string];
@@ -59,7 +59,7 @@ function createArcPath(
   return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
 }
 
-export interface ICalculateRectOrbitTetradCoordinatesParams {
+export interface ICalculateRectangleOrbitTetradCoordinatesParams {
   readonly gap?: number;
   readonly width?: number;
   readonly height?: number;
@@ -74,14 +74,14 @@ export interface ICalculateRectOrbitTetradCoordinatesParams {
 }
 
 /**
- * Calculates geometric coordinates for the RectOrbitTetrad layout.
+ * Calculates geometric coordinates for the RectangleOrbitTetrad layout.
  * Indices (Clockwise starting Top-Left):
  * 0: Top-Left (01)
  * 1: Top-Right (02)
  * 2: Bottom-Right (03)
  * 3: Bottom-Left (04)
  */
-export function calculateRectOrbitTetradCoordinates({
+export function calculateRectangleOrbitTetradCoordinates({
   gap = 14,
   width = 136,
   height = 150,
@@ -93,7 +93,7 @@ export function calculateRectOrbitTetradCoordinates({
   iconPaddingX = 30,
   iconPaddingY = 32,
   arcBorderWidth = 5,
-}: ICalculateRectOrbitTetradCoordinatesParams = {}): IRectOrbitTetradCoordinates {
+}: ICalculateRectangleOrbitTetradCoordinatesParams = {}): IRectangleOrbitTetradCoordinates {
   const centerX = viewBoxSize / 2;
   const centerY = viewBoxSize / 2;
   const halfGap = gap / 2;
@@ -235,102 +235,3 @@ export function calculateRectOrbitTetradCoordinates({
     numberPositions: [num0, num1, num2, num3],
   };
 }
-
-export interface ILightenColorParams {
-  readonly hex: string;
-  readonly ratio?: number;
-}
-
-/**
- * Automatically lightens a base hex color by mixing it with white.
- * ratio: 0 = original color, 1 = pure white.
- */
-export function lightenColor({
-  hex,
-  ratio = 0.5,
-}: ILightenColorParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => {
-            return char + char;
-          })
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number => {
-    return Math.min(255, Math.max(0, Math.round(val)));
-  };
-
-  const lr = clamp(r + (255 - r) * ratio);
-  const lg = clamp(g + (255 - g) * ratio);
-  const lb = clamp(b + (255 - b) * ratio);
-
-  const toHex = (n: number): string => {
-    return n.toString(16).padStart(2, '0');
-  };
-
-  return `#${toHex(lr)}${toHex(lg)}${toHex(lb)}`;
-}
-
-export interface IDarkenColorParams {
-  readonly hex: string;
-  readonly ratio?: number;
-}
-
-/**
- * Automatically darkens a base hex color by mixing it with black.
- * ratio: 0 = original color, 1 = pure black.
- */
-export function darkenColor({ hex, ratio = 0.18 }: IDarkenColorParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => {
-            return char + char;
-          })
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number => {
-    return Math.min(255, Math.max(0, Math.round(val)));
-  };
-
-  const dr = clamp(r * (1 - ratio));
-  const dg = clamp(g * (1 - ratio));
-  const db = clamp(b * (1 - ratio));
-
-  const toHex = (n: number): string => {
-    return n.toString(16).padStart(2, '0');
-  };
-
-  return `#${toHex(dr)}${toHex(dg)}${toHex(db)}`;
-}

package/utils/facets/tetrad/rectangle-orbit-tetrad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createRectangleOrbitTetradGeometry';
+export * from './resolveRectangleOrbitTetradItems';

package/utils/{rectOrbitTetrad/resolveRectOrbitTetradItems.ts → facets/tetrad/rectangle-orbit-tetrad/resolveRectangleOrbitTetradItems.ts}

@@ -1,57 +1,55 @@
-import { lightenColor } from './createRectOrbitTetradGeometry';
+import { lightenColor } from '../../../colors';
 
-export type TRectOrbitTetradIcon = string | object | boolean;
+export type TRectangleOrbitTetradIcon = string | object | boolean;
 
-export interface IRectOrbitTetradItem {
+export interface IRectangleOrbitTetradItem {
   readonly id?: string | number;
   /**
    * Optional icon: icon class (e.g. 'i-lucide-user'), component object,
    * built-in name ('user' | 'academic' | 'briefcase' | 'target'), or false to hide.
    */
-  readonly icon?: TRectOrbitTetradIcon;
+  readonly icon?: TRectangleOrbitTetradIcon;
   readonly color?: string;
   readonly cardBg?: string;
   readonly arcColor?: string;
   readonly arcRatio?: number;
   readonly textColor?: string;
-  readonly titleColor?: string;
   readonly arcBorderColor?: string;
   readonly arcBorderRatio?: number;
 }
 
-export interface IResolvedRectOrbitTetradItem extends IRectOrbitTetradItem {
+export interface IResolvedRectangleOrbitTetradItem
+  extends IRectangleOrbitTetradItem {
   readonly id: string | number;
   readonly color: string;
   readonly cardBg: string;
   readonly arcColor: string;
   readonly textColor: string;
-  readonly titleColor: string;
   readonly arcBorderColor: string;
 }
 
 export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
 ] = [
   // 0: Top-Left (01) - Golden Orange
   {
     id: '01',
     icon: 'user',
-    color: '#f29e4b',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
     cardBg: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#e6882c',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.8,
     }),
   },
@@ -59,19 +57,18 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '02',
     icon: 'academic',
-    color: '#a4cb81',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
     cardBg: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#8bb863',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.8,
     }),
   },
@@ -79,19 +76,18 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '03',
     icon: 'briefcase',
-    color: '#62b6a8',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
     cardBg: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#4ea798',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.8,
     }),
   },
@@ -99,30 +95,29 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '04',
     icon: 'target',
-    color: '#e9717a',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
     cardBg: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#e45b65',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.8,
     }),
   },
 ] as const;
 
 export function resolveSingleItem(
-  defaultItem: IResolvedRectOrbitTetradItem,
-  userItem?: IRectOrbitTetradItem,
+  defaultItem: IResolvedRectangleOrbitTetradItem,
+  userItem?: IRectangleOrbitTetradItem,
   defaultArcRatio = 0.55,
   defaultArcBorderRatio = 0.8,
-): IResolvedRectOrbitTetradItem {
+): IResolvedRectangleOrbitTetradItem {
   const merged = {
     ...defaultItem,
     ...(userItem ?? {}),
@@ -155,9 +150,6 @@ export function resolveSingleItem(
           })
         : defaultItem.arcColor),
     textColor: merged.textColor ?? defaultItem.textColor,
-    titleColor:
-      merged.titleColor ??
-      (isColorChanged ? baseColor : defaultItem.titleColor),
     arcBorderColor:
       userItem?.arcBorderColor ??
       (isColorChanged || userItem?.arcBorderRatio !== undefined
@@ -169,21 +161,21 @@ export function resolveSingleItem(
   };
 }
 
-export interface IResolveRectOrbitTetradItemsParams {
-  readonly items?: readonly IRectOrbitTetradItem[];
+export interface IResolveRectangleOrbitTetradItemsParams {
+  readonly items?: readonly IRectangleOrbitTetradItem[];
   readonly arcRatio?: number;
   readonly arcBorderRatio?: number;
 }
 
-export function resolveRectOrbitTetradItems({
+export function resolveRectangleOrbitTetradItems({
   items = [],
   arcRatio = 0.55,
   arcBorderRatio = 0.8,
-}: IResolveRectOrbitTetradItemsParams = {}): readonly [
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
+}: IResolveRectangleOrbitTetradItemsParams = {}): readonly [
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
 ] {
   return [
     resolveSingleItem(

package/utils/{arrowTriad → facets/triad/arrow-triad}/resolveArrowTriadItems.ts

@@ -17,48 +17,45 @@ export interface IResolvedArrowTriadItem {
   readonly title: string;
   readonly description: string;
   readonly icon?: string | object | false;
-  readonly cardBg: string;
+  readonly cardBg?: string;
   readonly textColor: string;
   readonly titleColor: string;
 }
 
 const defaultItem0: IResolvedArrowTriadItem = {
   id: '01',
-  color: '#fec201',
-  depthColor: '#d59b01',
-  title: 'TITLE TEXT HERE',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore',
+  color: 'var(--alpha-arrow-triad-item-1-color)',
+  depthColor: 'var(--alpha-arrow-triad-item-1-depth)',
+  title: '',
+  description: '',
   icon: undefined,
-  cardBg: '#ffffff',
-  textColor: '#64748b',
-  titleColor: '#1e293b',
+  cardBg: undefined,
+  textColor: 'var(--alpha-arrow-triad-content)',
+  titleColor: 'var(--alpha-arrow-triad-item-1-color)',
 };
 
 const defaultItem1: IResolvedArrowTriadItem = {
   id: '02',
-  color: '#71ad49',
-  depthColor: '#548235',
-  title: 'TITLE TEXT HERE',
-  description:
-    'Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo cupidatat non proident, sunt',
+  color: 'var(--alpha-arrow-triad-item-2-color)',
+  depthColor: 'var(--alpha-arrow-triad-item-2-depth)',
+  title: '',
+  description: '',
   icon: undefined,
-  cardBg: '#ffffff',
-  textColor: '#64748b',
-  titleColor: '#1e293b',
+  cardBg: undefined,
+  textColor: 'var(--alpha-arrow-triad-content)',
+  titleColor: 'var(--alpha-arrow-triad-item-2-color)',
 };
 
 const defaultItem2: IResolvedArrowTriadItem = {
   id: '03',
-  color: '#5b9bd5',
-  depthColor: '#41719c',
-  title: 'TITLE TEXT HERE',
-  description:
-    'Magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo',
+  color: 'var(--alpha-arrow-triad-item-3-color)',
+  depthColor: 'var(--alpha-arrow-triad-item-3-depth)',
+  title: '',
+  description: '',
   icon: undefined,
-  cardBg: '#ffffff',
-  textColor: '#64748b',
-  titleColor: '#1e293b',
+  cardBg: undefined,
+  textColor: 'var(--alpha-arrow-triad-content)',
+  titleColor: 'var(--alpha-arrow-triad-item-3-color)',
 };
 
 export const DEFAULT_ARROW_TRIAD_ITEMS: readonly [
@@ -93,16 +90,18 @@ export function resolveSingleArrowTriadItem(
     return fallback;
   }
 
+  const color = item.color ?? fallback.color;
+
   return {
     id: item.id ?? fallback.id,
-    color: item.color ?? fallback.color,
+    color,
     depthColor: item.depthColor ?? fallback.depthColor,
     title: item.title ?? fallback.title,
     description: item.description ?? fallback.description,
     icon: item.icon !== undefined ? item.icon : fallback.icon,
-    cardBg: item.cardBg ?? fallback.cardBg,
+    cardBg: item.cardBg !== undefined ? item.cardBg : fallback.cardBg,
     textColor: item.textColor ?? fallback.textColor,
-    titleColor: item.titleColor ?? fallback.titleColor,
+    titleColor: item.titleColor ?? color,
   };
 }
 

package/utils/{gearTriad → facets/triad/gear-triad}/context.ts

@@ -15,11 +15,11 @@ export interface IGearTriadRootContext {
   readonly isShifted: ComputedRef<boolean>;
   readonly currentStep: ComputedRef<number>;
   readonly activeOptionIndex: ComputedRef<number>;
-  readonly hasContents: ComputedRef<boolean>;
+  readonly hasDetails: ComputedRef<boolean>;
   readonly registerCallout: (
     override?: ComputedRef<IGearTriadItem> | (() => IGearTriadItem),
   ) => IGearTriadRegistration;
-  readonly registerContents: () => void;
+  readonly registerDetails: () => void;
   readonly items: ComputedRef<
     readonly [
       IResolvedGearTriadItem,
@@ -34,7 +34,7 @@ export interface IGearTriadCalloutContext {
   readonly index: number;
 }
 
-export interface IGearTriadContentsContext {
+export interface IGearTriadDetailsContext {
   readonly activeItem: ComputedRef<IResolvedGearTriadItem>;
   readonly activeOptionIndex: ComputedRef<number>;
   readonly registerContent: (option?: number) => { index: number };
@@ -47,5 +47,5 @@ export const GEAR_TRIAD_ROOT_KEY: InjectionKey<IGearTriadRootContext> = Symbol(
 export const GEAR_TRIAD_CALLOUT_KEY: InjectionKey<IGearTriadCalloutContext> =
   Symbol('GEAR_TRIAD_CALLOUT_KEY');
 
-export const GEAR_TRIAD_CONTENTS_KEY: InjectionKey<IGearTriadContentsContext> =
-  Symbol('GEAR_TRIAD_CONTENTS_KEY');
+export const GEAR_TRIAD_DETAILS_KEY: InjectionKey<IGearTriadDetailsContext> =
+  Symbol('GEAR_TRIAD_DETAILS_KEY');

package/utils/{gearTriad → facets/triad/gear-triad}/createGearTriadGeometry.ts

@@ -91,8 +91,10 @@ export function createGearTriadGeometry(): IGearTriadGeometry {
     } else {
       baseGearPath += ` L ${p1.x} ${p1.y}`;
     }
+
     baseGearPath += ` L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} A ${rNotch} ${rNotch} 0 0 0 ${p4.x} ${p4.y}`;
   }
+
   baseGearPath += ' Z';
 
   // ONE CANONICAL PETAL SHAPE (pointing South / 270 deg):

package/utils/{gearTriad → facets/triad/gear-triad}/resolveGearTriadItems.ts

@@ -37,43 +37,40 @@ export interface IResolvedGearTriadItem {
   readonly titleColor: string;
 }
 
-const DEFAULT_LOREM =
-  'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.';
-
 const defaultItem0: IResolvedGearTriadItem = {
   id: '01',
-  color: '#1fb5b5',
-  depthColor: '#126e7a',
-  title: 'Option 1',
-  description: DEFAULT_LOREM,
+  color: 'var(--alpha-gear-triad-item-1-color)',
+  depthColor: 'var(--alpha-gear-triad-item-1-depth)',
+  title: '',
+  description: '',
   icon: undefined,
   cardBg: undefined,
-  textColor: '#64748b',
-  titleColor: '#0f172a',
+  textColor: 'var(--alpha-gear-triad-content)',
+  titleColor: 'var(--alpha-gear-triad-item-1-color)',
 };
 
 const defaultItem1: IResolvedGearTriadItem = {
   id: '02',
-  color: '#f38942',
-  depthColor: '#aa521d',
-  title: 'Option 2',
-  description: DEFAULT_LOREM,
+  color: 'var(--alpha-gear-triad-item-2-color)',
+  depthColor: 'var(--alpha-gear-triad-item-2-depth)',
+  title: '',
+  description: '',
   icon: undefined,
   cardBg: undefined,
-  textColor: '#64748b',
-  titleColor: '#0f172a',
+  textColor: 'var(--alpha-gear-triad-content)',
+  titleColor: 'var(--alpha-gear-triad-item-2-color)',
 };
 
 const defaultItem2: IResolvedGearTriadItem = {
   id: '03',
-  color: '#f05367',
-  depthColor: '#a82c3c',
-  title: 'Option 3',
-  description: DEFAULT_LOREM,
+  color: 'var(--alpha-gear-triad-item-3-color)',
+  depthColor: 'var(--alpha-gear-triad-item-3-depth)',
+  title: '',
+  description: '',
   icon: undefined,
   cardBg: undefined,
-  textColor: '#64748b',
-  titleColor: '#0f172a',
+  textColor: 'var(--alpha-gear-triad-content)',
+  titleColor: 'var(--alpha-gear-triad-item-3-color)',
 };
 
 export const DEFAULT_GEAR_TRIAD_ITEMS: readonly [
@@ -82,7 +79,7 @@ export const DEFAULT_GEAR_TRIAD_ITEMS: readonly [
   IResolvedGearTriadItem,
 ] = [defaultItem0, defaultItem1, defaultItem2];
 
-export const GEAR_TRIAD_BASE_COLOR = '#11455c';
+export const GEAR_TRIAD_BASE_COLOR = 'var(--alpha-gear-triad-valley)';
 
 export function getDefaultGearTriadItem(index: number): IResolvedGearTriadItem {
   const safe = Math.abs(index) % 3;
@@ -108,16 +105,18 @@ export function resolveSingleGearTriadItem(
     return fallback;
   }
 
+  const color = item.color ?? fallback.color;
+
   return {
     id: item.id ?? fallback.id,
-    color: item.color ?? fallback.color,
+    color,
     depthColor: item.depthColor ?? fallback.depthColor,
     title: item.title ?? fallback.title,
     description: item.description ?? fallback.description,
     icon: item.icon !== undefined ? item.icon : fallback.icon,
     cardBg: item.cardBg !== undefined ? item.cardBg : fallback.cardBg,
     textColor: item.textColor ?? fallback.textColor,
-    titleColor: item.titleColor ?? fallback.titleColor,
+    titleColor: item.titleColor ?? color,
   };
 }
 

package/utils/facets/triad/hexagon-triad/context.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IHexagonTriadItem } from './resolveHexagonTriadItems';
+
+export interface IHexagonTriadRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly items: ComputedRef<readonly IHexagonTriadItem[]>;
+  readonly registerCallout: () => {
+    readonly index: number;
+    readonly item: ComputedRef<IHexagonTriadItem>;
+    readonly setBadgeText: (text: string | number) => void;
+  };
+}
+
+export interface IHexagonTriadCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IHexagonTriadItem>;
+  readonly setBadgeText: (text: string | number) => void;
+}
+
+export const HEX_TRIAD_ROOT_KEY: InjectionKey<IHexagonTriadRootContext> =
+  Symbol('HEX_TRIAD_ROOT_KEY');
+
+export const HEX_TRIAD_CALLOUT_KEY: InjectionKey<IHexagonTriadCalloutContext> =
+  Symbol('HEX_TRIAD_CALLOUT_KEY');