@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

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');

package/utils/{hexTriad/createHexTriadGeometry.ts → facets/triad/hexagon-triad/createHexagonTriadGeometry.ts}

@@ -1,37 +1,20 @@
-export interface IHexTriadPoint {
+export interface IHexagonTriadPoint {
   readonly x: number;
   readonly y: number;
 }
 
-export interface IHexTriadCoordinates {
+export interface IHexagonTriadCoordinates {
   readonly centerX: number;
   readonly centerY: number;
   readonly hexRadius: number;
   readonly triadRadius: number;
   readonly badgeRadius: number;
-  readonly hex1: IHexTriadPoint;
-  readonly hex2: IHexTriadPoint;
-  readonly hex3: IHexTriadPoint;
-  readonly badge1: IHexTriadPoint;
-  readonly badge2: IHexTriadPoint;
-  readonly badge3: IHexTriadPoint;
-}
-
-/**
- * Creates pointy-topped hexagon SVG points with sharp vertices
- */
-export function createHexagonPoints(cx: number, cy: number, r: number): string {
-  const angles = [-90, -30, 30, 90, 150, 210];
-
-  return angles
-    .map((deg) => {
-      const rad = (deg * Math.PI) / 180;
-      const x = (cx + r * Math.cos(rad)).toFixed(1);
-      const y = (cy + r * Math.sin(rad)).toFixed(1);
-
-      return `${x},${y}`;
-    })
-    .join(' ');
+  readonly hex1: IHexagonTriadPoint;
+  readonly hex2: IHexagonTriadPoint;
+  readonly hex3: IHexagonTriadPoint;
+  readonly badge1: IHexagonTriadPoint;
+  readonly badge2: IHexagonTriadPoint;
+  readonly badge3: IHexagonTriadPoint;
 }
 
 /**
@@ -46,6 +29,7 @@ export function createRoundedHexagonPath(
   const angles = [-90, -30, 30, 90, 150, 210];
   const vertices = angles.map((deg) => {
     const rad = (deg * Math.PI) / 180;
+
     return {
       x: cx + r * Math.cos(rad),
       y: cy + r * Math.sin(rad),
@@ -108,14 +92,14 @@ export function createRoundedHexagonPath(
   return commands.join(' ');
 }
 
-export function calculateHexTriadCoordinates(
+export function calculateHexagonTriadCoordinates(
   centerX = 270,
   centerY = 224,
   triadRadius = 66,
   hexRadius = 114,
   badgeRadius = 28,
   horizontalSpread = 28,
-): IHexTriadCoordinates {
+): IHexagonTriadCoordinates {
   const angleRad30 = (30 * Math.PI) / 180;
 
   const hex2X = Number(

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

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createHexagonTriadGeometry';
+export * from './resolveHexagonTriadItems';

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

@@ -0,0 +1,60 @@
+export interface IHexagonTriadItem {
+  readonly id?: string | number;
+  readonly title: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly depthColor?: string;
+  readonly lightColor?: string;
+}
+
+export const DEFAULT_HEX_TRIAD_ITEMS: readonly [
+  IHexagonTriadItem,
+  IHexagonTriadItem,
+  IHexagonTriadItem,
+] = [
+  {
+    id: '01',
+    title: '',
+    description: '',
+    color: 'var(--alpha-hexagon-triad-item-1-color)',
+    depthColor: 'var(--alpha-hexagon-triad-item-1-depth)',
+    lightColor: 'var(--alpha-hexagon-triad-item-1-light)',
+  },
+  {
+    id: '02',
+    title: '',
+    description: '',
+    color: 'var(--alpha-hexagon-triad-item-2-color)',
+    depthColor: 'var(--alpha-hexagon-triad-item-2-depth)',
+    lightColor: 'var(--alpha-hexagon-triad-item-2-light)',
+  },
+  {
+    id: '03',
+    title: '',
+    description: '',
+    color: 'var(--alpha-hexagon-triad-item-3-color)',
+    depthColor: 'var(--alpha-hexagon-triad-item-3-depth)',
+    lightColor: 'var(--alpha-hexagon-triad-item-3-light)',
+  },
+];
+
+export function resolveHexagonTriadItems(
+  userItems?: readonly IHexagonTriadItem[],
+): readonly [IHexagonTriadItem, IHexagonTriadItem, IHexagonTriadItem] {
+  const items = userItems ?? [];
+
+  return [
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[0],
+      ...(items[0] ?? {}),
+    },
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[1],
+      ...(items[1] ?? {}),
+    },
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[2],
+      ...(items[2] ?? {}),
+    },
+  ] as const;
+}

package/utils/{shiftingHeading → layouts/shifting-heading}/collectShiftingIntroNodes.ts

@@ -29,6 +29,7 @@ const hasImplicitClickDirective = (node: VNode): boolean => {
   return Boolean(
     node.dirs?.some(({ dir, value }) => {
       const name = getDirectiveName(dir);
+
       return (
         name !== undefined &&
         CLICK_DIRECTIVE_NAMES.has(name) &&

package/utils/layouts/table-of-contents/calculateTocCenterAlignmentOffset.ts

@@ -0,0 +1,17 @@
+export interface ICalculateTocCenterAlignmentOffsetPxParams {
+  readonly markerCenterY: number;
+  readonly articleCenterY: number;
+  readonly scaleY: number;
+}
+
+export function calculateTocCenterAlignmentOffsetPx({
+  markerCenterY,
+  articleCenterY,
+  scaleY,
+}: ICalculateTocCenterAlignmentOffsetPxParams): number {
+  if (scaleY <= 0) {
+    return 0;
+  }
+
+  return (markerCenterY - articleCenterY) / scaleY;
+}

package/utils/{tableOfContents → layouts/table-of-contents}/calculateTocMarkerPositions.ts

@@ -64,18 +64,6 @@ export function calculateTocItemCount({
   return Math.min(normalizedAvailableCount, normalizedMaximumCount);
 }
 
-export function calculateTocMarkerCenterPercent(count: number): number {
-  const positions = calculateTocMarkerPositions(count);
-  const firstPosition = positions[0];
-  const lastPosition = positions.at(-1);
-
-  if (!firstPosition || !lastPosition) {
-    return 50;
-  }
-
-  return (firstPosition.topPercent + lastPosition.topPercent) / 2;
-}
-
 export function calculateTocMiddleMarkerOffsetPx(count: number): number {
   const positions = calculateTocMarkerPositions(count);
   const middlePosition = positions[Math.floor((positions.length - 1) / 2)];

package/utils/{tableOfContents → layouts/table-of-contents}/createTocConnectorPath.ts

@@ -20,11 +20,17 @@ export function calculateTocConnectorEndX({
   return articleLeftX + CONNECTOR_ARTICLE_OVERLAP_PX;
 }
 
-export function createTocConnectorPath(
-  start: ITocConnectorPoint,
-  end: ITocConnectorPoint,
-  isMiddle: boolean,
-): string {
+export interface ICreateTocConnectorPathParams {
+  readonly isMiddle: boolean;
+  readonly end: ITocConnectorPoint;
+  readonly start: ITocConnectorPoint;
+}
+
+export function createTocConnectorPath({
+  end,
+  start,
+  isMiddle,
+}: ICreateTocConnectorPathParams): string {
   const startX = formatCoordinate(start.x);
   const startY = formatCoordinate(start.y);
   const endX = formatCoordinate(end.x);

package/utils/{mergeUno → merge-uno}/classifyVisual.ts

@@ -97,7 +97,7 @@ function classifyBackground(utility: string): string[] {
     return ['background-position'];
   }
 
-  if (/^bg-(?:gradient|image|url)-/.test(utility)) {
+  if (/^bg-(?:gradient|linear|image|url)-/.test(utility)) {
     return ['background-image'];
   }
 

package/utils/{mergeUno → merge-uno}/collectClassNames.ts

@@ -17,12 +17,14 @@ function splitClassNames(value: string): string[] {
     if (escaped) {
       current += character;
       escaped = false;
+
       continue;
     }
 
     if (character === '\\') {
       current += character;
       escaped = true;
+
       continue;
     }
 
@@ -39,6 +41,7 @@ function splitClassNames(value: string): string[] {
     if (character === '"' || character === "'") {
       current += character;
       quote = character;
+
       continue;
     }
 
@@ -99,9 +102,10 @@ function expandVariantGroup(token: string): string[] {
     ) {
       const prefix = token.slice(0, index + 1);
       const contents = token.slice(index + 2, -1);
-      return splitClassNames(contents).flatMap((child) =>
-        expandVariantGroup(`${prefix}${child}`),
-      );
+
+      return splitClassNames(contents).flatMap((child) => {
+        return expandVariantGroup(`${prefix}${child}`);
+      });
     }
   }
 
@@ -117,6 +121,7 @@ function collectClassName(value: TUnoClassValue, result: string[]): void {
     for (const token of splitClassNames(String(value))) {
       result.push(...expandVariantGroup(token));
     }
+
     return;
   }
 
@@ -124,6 +129,7 @@ function collectClassName(value: TUnoClassValue, result: string[]): void {
     for (const item of value) {
       collectClassName(item, result);
     }
+
     return;
   }