@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/card/{horiz-card/HorizCard.vue → horizontal-card/HorizontalCard.vue}

@@ -5,47 +5,51 @@ import {
   Fragment,
   provide,
   useSlots,
+  isVNode,
   type VNode,
 } from 'vue';
 
 import {
-  createHorizCardAccentPath,
-  createHorizCardPath,
+  createHorizontalCardAccentPath,
+  createHorizontalCardPath,
   HORIZ_CARD_KEY,
-  hexToRgba,
-} from '../../../utils/horizCard';
+  type THorizontalCardBadgeVariant,
+} from '../../../utils/card/horizontal-card';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'HorizCard',
+  name: 'HorizontalCard',
   inheritAttrs: false,
 });
 
-export interface IHorizCardProps {
+export interface IHorizontalCardProps {
   readonly color?: string;
   readonly dots?: boolean;
-  readonly title?: string;
+  readonly title?: string | VNode;
   readonly cardBg?: string;
   readonly textColor?: string;
-  readonly titleColor?: string;
-  readonly lightColor?: string;
-  readonly description?: string;
   readonly step?: string | number;
   readonly icon?: string | object;
   readonly hasIconCircle?: boolean;
+  /**
+   * Controls the badge display mode:
+   * - 'outside': ribbon badge anchored over the top border (default)
+   * - 'none' | 'hidden': badge is completely hidden
+   */
+  readonly variant?: THorizontalCardBadgeVariant;
+  readonly badgeVariant?: THorizontalCardBadgeVariant;
 }
 
-const props = withDefaults(defineProps<IHorizCardProps>(), {
+const props = withDefaults(defineProps<IHorizontalCardProps>(), {
   dots: true,
   step: '01',
   icon: undefined,
-  color: '#ea583a',
-  cardBg: '#ffffff',
-  title: 'Lorem Ipsum',
+  color: 'var(--alpha-horizontal-card-accent)',
+  cardBg: 'var(--alpha-horizontal-card-bg)',
+  title: undefined,
   textColor: undefined,
-  lightColor: undefined,
-  titleColor: undefined,
-  description: undefined,
+  variant: undefined,
+  badgeVariant: 'outside',
   hasIconCircle: undefined,
 });
 
@@ -78,19 +82,15 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
 }
 
 function isBadgeNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'HorizCardBadge');
+  return hasComponentName(node.type, 'HorizontalCardBadge');
 }
 
 function isIconNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'HorizCardIcon');
-}
-
-function isHeadingNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'HorizCardHeading');
+  return hasComponentName(node.type, 'HorizontalCardIcon');
 }
 
 function isContentNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'HorizCardContent');
+  return hasComponentName(node.type, 'HorizontalCardContent');
 }
 
 const defaultNodes = computed(() => {
@@ -109,62 +109,53 @@ const slottedIcon = computed(() => {
   return defaultNodes.value.find(isIconNode);
 });
 
-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) &&
-      !isIconNode(node) &&
-      !isHeadingNode(node) &&
-      !isContentNode(node)
-    );
+    return !isBadgeNode(node) && !isIconNode(node) && !isContentNode(node);
   });
 });
 
-const resolvedColor = computed(() => {
-  return props.color;
+const customColor = computed(() => {
+  return props.color !== 'var(--alpha-horizontal-card-accent)'
+    ? props.color
+    : undefined;
 });
 
-const resolvedLightColor = computed(() => {
-  return (
-    props.lightColor ??
-    hexToRgba({
-      alpha: 0.16,
-      hex: props.color,
-    })
-  );
+const resolvedColor = computed(() => {
+  return props.color;
 });
 
 const resolvedCardBg = computed(() => {
   return props.cardBg;
 });
 
-const resolvedTitleColor = computed(() => {
-  return props.titleColor ?? props.color;
-});
-
 const resolvedTextColor = computed(() => {
   return props.textColor;
 });
 
+const resolvedBadgeVariant = computed<THorizontalCardBadgeVariant>(() => {
+  return props.variant ?? props.badgeVariant ?? 'outside';
+});
+
+const isBadgeVisible = computed(() => {
+  return (
+    resolvedBadgeVariant.value !== 'none' &&
+    resolvedBadgeVariant.value !== 'hidden'
+  );
+});
+
 const resolvedStep = computed(() => {
   return props.step;
 });
 
 provide(HORIZ_CARD_KEY, {
   step: resolvedStep,
-  color: resolvedColor,
-  cardBg: resolvedCardBg,
-  lightColor: resolvedLightColor,
-  titleColor: resolvedTitleColor,
-  textColor: resolvedTextColor as ComputedRef<string | undefined>,
+  color: customColor as ComputedRef<string>,
+  textColor: resolvedTextColor,
 });
 
 // Fixed coordinate grid for crisp SVG vector drawing
@@ -172,7 +163,7 @@ const CARD_WIDTH = 360;
 const CARD_HEIGHT = 260;
 
 const cardPath = computed(() => {
-  return createHorizCardPath({
+  return createHorizontalCardPath({
     chamferX: 60,
     chamferY: 76,
     borderRadius: 24,
@@ -183,7 +174,7 @@ const cardPath = computed(() => {
 });
 
 const accentPath = computed(() => {
-  return createHorizCardAccentPath({
+  return createHorizontalCardAccentPath({
     chamferX: 60,
     chamferY: 76,
     chamferFillet: 22,
@@ -205,27 +196,39 @@ const isIconActive = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-horiz-card relative inline-block select-none w-[360px] h-[260px] font-sans',
+  'alpha-horizontal-card relative inline-block select-none w-90 h-65 font-sans',
 );
 </script>
 
 <template>
-  <div v-bind="forwardedAttrs()" :class="className()">
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{
+      '--alpha-horizontal-card-accent': customColor,
+      '--alpha-horizontal-card-title': customColor,
+      '--alpha-horizontal-card-bg':
+        props.cardBg !== 'var(--alpha-horizontal-card-bg)'
+          ? resolvedCardBg
+          : undefined,
+    }"
+  >
     <!-- SVG Vector Layer: Bottom-left accent blob + filleted chamfered card outline -->
     <svg
-      class="absolute -left-[28px] -top-[16px] w-[416px] h-[292px] pointer-events-none overflow-visible"
+      aria-hidden="true"
+      class="absolute -left-7 -top-4 w-104 h-73 pointer-events-none overflow-visible"
       viewBox="-28 -16 416 292"
       xmlns="http://www.w3.org/2000/svg"
     >
       <!-- Layer 1: Solid accent shape behind the card & chamfer -->
       <path
-        class="alpha-horiz-card__accent"
+        class="alpha-horizontal-card__accent"
         :d="accentPath"
         :fill="resolvedColor"
       />
       <!-- Layer 2: Main card body with stroke border and filleted chamfered cut -->
       <path
-        class="alpha-horiz-card__body"
+        class="alpha-horizontal-card__body"
         :d="cardPath"
         :fill="resolvedCardBg"
         :stroke="resolvedColor"
@@ -234,10 +237,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
       />
     </svg>
     <!-- Ribbon Step Badge at top left (hangs over the top border) -->
-    <div class="absolute left-[20px] -top-[20px] z-10">
+    <div v-if="isBadgeVisible" class="absolute left-5 -top-5 z-10">
       <slot name="badge">
         <component :is="slottedBadge" v-if="slottedBadge" />
-        <HorizCardBadge v-else :step="resolvedStep" :color="resolvedColor" />
+        <HorizontalCardBadge v-else :step="resolvedStep" :color="customColor" />
       </slot>
     </div>
     <!-- Card Content Layer -->
@@ -253,38 +256,28 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         <template v-if="isIconActive">
           <slot name="icon">
             <component :is="slottedIcon" v-if="slottedIcon" />
-            <HorizCardIcon
+            <HorizontalCardIcon
               v-else
               :icon="props.icon"
-              :color="resolvedColor"
-              :light-color="resolvedLightColor"
+              :color="customColor"
               :size="100"
             />
           </slot>
         </template>
         <!-- Heading + Body Description -->
         <div class="flex-1 flex flex-col justify-center min-w-0 pr-1">
-          <slot name="title">
-            <component :is="slottedHeading" v-if="slottedHeading" />
-            <HorizCardHeading
-              v-else
-              :color="resolvedTitleColor"
-              class="mb-2 text-lg"
-            >
-              {{ props.title }}
-            </HorizCardHeading>
-          </slot>
-          <slot name="description">
+          <h4
+            v-if="$slots.title || props.title != null"
+            class="alpha-horizontal-card-title mb-2 font-bold text-(--alpha-horizontal-card-title)"
+          >
+            <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" />
-            <HorizCardContent
-              v-else
-              :color="resolvedTextColor"
-              class="text-[11px] leading-[1.45]"
-            >
-              <template v-if="props.description">
-                {{ props.description }}
-              </template>
-            </HorizCardContent>
           </slot>
           <!-- Any other custom slotted components -->
           <component

package/components/card/{horiz-card/HorizCardBadge.vue → horizontal-card/HorizontalCardBadge.vue}

@@ -2,17 +2,17 @@
 import { computed, inject } from 'vue';
 
 import {
-  createHorizCardBadgePath,
+  createHorizontalCardBadgePath,
   HORIZ_CARD_KEY,
-} from '../../../utils/horizCard';
+} from '../../../utils/card/horizontal-card';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'HorizCardBadge',
+  name: 'HorizontalCardBadge',
 });
 
-export interface IHorizCardBadgeProps {
+export interface IHorizontalCardBadgeProps {
   /**
    * Badge fill color. Overrides context color.
    */
@@ -23,7 +23,7 @@ export interface IHorizCardBadgeProps {
   readonly step?: string | number;
 }
 
-const props = withDefaults(defineProps<IHorizCardBadgeProps>(), {
+const props = withDefaults(defineProps<IHorizontalCardBadgeProps>(), {
   step: undefined,
   color: undefined,
 });
@@ -31,14 +31,18 @@ const props = withDefaults(defineProps<IHorizCardBadgeProps>(), {
 const context = inject(HORIZ_CARD_KEY, undefined);
 
 const resolvedColor = computed(() => {
-  return props.color ?? context?.color.value ?? '#ea583a';
+  return (
+    props.color ??
+    context?.color.value ??
+    'var(--alpha-horizontal-card-badge-bg, var(--alpha-horizontal-card-accent))'
+  );
 });
 
 const resolvedStep = computed(() => {
   return props.step ?? context?.step.value ?? '01';
 });
 
-const badgePath = createHorizCardBadgePath({
+const badgePath = createHorizontalCardBadgePath({
   width: 84,
   height: 58,
   tipRadius: 8,
@@ -48,14 +52,15 @@ const badgePath = createHorizCardBadgePath({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-horiz-card-badge inline-flex items-center justify-center select-none',
+  'alpha-horizontal-card-badge inline-flex items-center justify-center select-none',
 );
 </script>
 
 <template>
   <div v-bind="forwardedAttrs()" :class="className()">
     <svg
-      class="w-[84px] h-[58px] overflow-visible drop-shadow-sm"
+      aria-hidden="true"
+      class="w-21 h-14.5 overflow-visible drop-shadow-sm"
       viewBox="0 0 84 58"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -65,7 +70,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         y="27"
         text-anchor="middle"
         dominant-baseline="central"
-        fill="#ffffff"
+        fill="var(--alpha-horizontal-card-badge)"
         class="font-sans font-bold text-[25px] tracking-tight"
       >
         <slot>{{ resolvedStep }}</slot>

package/components/card/{horiz-card/HorizCardContent.vue → horizontal-card/HorizontalCardContent.vue}

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HORIZ_CARD_KEY } from '../../../utils/horizCard';
+import { HORIZ_CARD_KEY } from '../../../utils/card/horizontal-card';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'HorizCardContent',
+  name: 'HorizontalCardContent',
 });
 
-export interface IHorizCardContentProps {
+export interface IHorizontalCardContentProps {
   /**
    * Content text color. Overrides context textColor.
    */
   readonly color?: string;
 }
 
-const props = withDefaults(defineProps<IHorizCardContentProps>(), {
+const props = withDefaults(defineProps<IHorizontalCardContentProps>(), {
   color: undefined,
 });
 
@@ -27,7 +27,7 @@ const contentColor = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-horiz-card-content font-sans text-xs leading-relaxed text-slate-600 dark:text-slate-300 opacity-90',
+  'alpha-horizontal-card-content font-sans text-xs leading-relaxed text-(--alpha-horizontal-card-content) opacity-90',
 );
 </script>
 
@@ -35,12 +35,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   <p
     v-bind="forwardedAttrs()"
     :class="className()"
-    :style="contentColor ? { color: contentColor } : undefined"
+    :style="
+      contentColor && !contentColor.includes('--alpha-horizontal-card-content')
+        ? { '--alpha-horizontal-card-content': contentColor }
+        : undefined
+    "
   >
-    <slot>
-      Lorem ipsum dolor sit amet, nibh est. A magna maecenas, quam magna nec
-      quis, lorem nunc. Suspendisse viverra sodales mauris, cras pharetra proin
-      egestas.
-    </slot>
+    <slot />
   </p>
 </template>

package/components/card/{horiz-card/HorizCardIcon.vue → horizontal-card/HorizontalCardIcon.vue}

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HORIZ_CARD_KEY, hexToRgba } from '../../../utils/horizCard';
+import { HORIZ_CARD_KEY } from '../../../utils/card/horizontal-card';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'HorizCardIcon',
+  name: 'HorizontalCardIcon',
 });
 
-export interface IHorizCardIconProps {
+export interface IHorizontalCardIconProps {
   /**
    * Optional icon class (e.g. 'i-carbon-search') or component.
    */
@@ -18,10 +18,6 @@ export interface IHorizCardIconProps {
    * Foreground icon color. Overrides context color.
    */
   readonly color?: string;
-  /**
-   * Circular background color. Overrides context lightColor.
-   */
-  readonly lightColor?: string;
   /**
    * Circle size in pixels or CSS string.
    * @default 96
@@ -29,32 +25,24 @@ export interface IHorizCardIconProps {
   readonly size?: number | string;
 }
 
-const props = withDefaults(defineProps<IHorizCardIconProps>(), {
+const props = withDefaults(defineProps<IHorizontalCardIconProps>(), {
   size: 96,
   icon: undefined,
   color: undefined,
-  lightColor: undefined,
 });
 
 const context = inject(HORIZ_CARD_KEY, undefined);
 
-const resolvedColor = computed(() => {
-  return props.color ?? context?.color.value ?? '#ea583a';
+const customColor = computed(() => {
+  return props.color ?? context?.color.value;
 });
 
-const resolvedLightColor = computed(() => {
-  if (props.lightColor) {
-    return props.lightColor;
-  }
-
-  if (context?.lightColor.value) {
-    return context.lightColor.value;
+const customLightColor = computed(() => {
+  if (customColor.value) {
+    return `color-mix(in srgb, ${customColor.value} 16%, transparent)`;
   }
 
-  return hexToRgba({
-    hex: resolvedColor.value,
-    alpha: 0.16,
-  });
+  return undefined;
 });
 
 const resolvedSize = computed(() => {
@@ -71,7 +59,7 @@ const isComponentIcon = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-horiz-card-icon rounded-full flex items-center justify-center flex-shrink-0 transition-transform duration-300 select-none',
+  'alpha-horizontal-card-icon rounded-full flex items-center justify-center shrink-0 transition-transform duration-300 select-none bg-(--alpha-horizontal-card-icon-bg) text-(--alpha-horizontal-card-icon)',
 );
 </script>
 
@@ -82,25 +70,16 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       width: resolvedSize,
       height: resolvedSize,
-      backgroundColor: resolvedLightColor,
-      color: resolvedColor,
+      '--alpha-horizontal-card-icon-bg': customLightColor,
+      '--alpha-horizontal-card-icon': customColor,
     }"
   >
     <slot>
-      <component
-        :is="props.icon"
-        v-if="isComponentIcon"
-        class="text-4xl"
-        :style="{ color: resolvedColor }"
-      />
-      <div
-        v-else-if="isStringIcon"
-        :class="props.icon"
-        class="text-4xl"
-        :style="{ color: resolvedColor }"
-      />
+      <component :is="props.icon" v-if="isComponentIcon" class="text-4xl" />
+      <div v-else-if="isStringIcon" :class="props.icon" class="text-4xl" />
       <!-- Default search icon matching the reference card -->
       <svg
+        aria-hidden="true"
         v-else
         class="w-12 h-12"
         viewBox="0 0 24 24"
@@ -111,7 +90,14 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         stroke-linejoin="round"
       >
         <circle cx="11" cy="11" r="7" />
-        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke-width="3" stroke-linecap="round" />
+        <line
+          x1="16.5"
+          y1="16.5"
+          x2="21"
+          y2="21"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
       </svg>
     </slot>
   </div>

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

@@ -0,0 +1,17 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-horizontal-card-accent: #ea583a;
+    --alpha-horizontal-card-badge: #ffffff;
+    /* Resolved from the component accent or props unless overridden. */
+    --alpha-horizontal-card-badge-bg: var(--alpha-horizontal-card-accent);
+    --alpha-horizontal-card-bg: #ffffff;
+    --alpha-horizontal-card-content: var(--alpha-foreground-primary, #475569);
+    /* Resolved from the component accent or props unless overridden. */
+    --alpha-horizontal-card-title: var(--alpha-horizontal-card-accent);
+    /* Resolved from the component accent or props unless overridden. */
+    --alpha-horizontal-card-icon: var(--alpha-horizontal-card-accent);
+    /* Resolved from the component accent or props unless overridden. */
+    --alpha-horizontal-card-icon-bg: color-mix(in srgb, var(--alpha-horizontal-card-accent) 16%, transparent);
+  }
+}