@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/card/{vert-card/VertCard.vue → vertical-card/VerticalCard.vue}

@@ -5,33 +5,29 @@ import {
   Fragment,
   provide,
   useSlots,
+  isVNode,
   type VNode,
 } from 'vue';
 
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import {
-  createVertCardBottomBlobPath,
-  createVertCardTopRightBlobPath,
-  hexToRgba,
-  type TVertCardBadgeVariant,
+  createVerticalCardBottomBlobPath,
+  createVerticalCardTopRightBlobPath,
+  type TVerticalCardBadgeVariant,
   VERT_CARD_KEY,
-} from '../../../utils/vertCard';
+} from '../../../utils/card/vertical-card';
 
 defineOptions({
-  name: 'VertCard',
+  name: 'VerticalCard',
   inheritAttrs: false,
 });
 
-export interface IVertCardProps {
+export interface IVerticalCardProps {
   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 stripeColor?: string;
-  readonly description?: string;
   readonly hasDivider?: boolean;
   readonly step?: string | number;
   readonly icon?: string | object;
@@ -42,24 +38,20 @@ export interface IVertCardProps {
    * - 'inside': badge displayed inside the card body (future state)
    * - 'none' | 'hidden': badge is completely hidden
    */
-  readonly variant?: TVertCardBadgeVariant;
-  readonly badgeVariant?: TVertCardBadgeVariant;
+  readonly variant?: TVerticalCardBadgeVariant;
+  readonly badgeVariant?: TVerticalCardBadgeVariant;
 }
 
-const props = withDefaults(defineProps<IVertCardProps>(), {
+const props = withDefaults(defineProps<IVerticalCardProps>(), {
   dots: true,
   step: '01',
   icon: undefined,
   hasDivider: true,
   title: undefined,
-  color: '#ea583a',
-  cardBg: '#ffffff',
+  color: 'var(--alpha-vertical-card-accent)',
+  cardBg: 'var(--alpha-vertical-card-bg)',
   variant: undefined,
   textColor: undefined,
-  lightColor: undefined,
-  titleColor: undefined,
-  stripeColor: undefined,
-  description: undefined,
   badgeVariant: 'outside',
   hasIconCircle: undefined,
 });
@@ -93,22 +85,15 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
 }
 
 function isBadgeNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'VertCardBadge');
+  return hasComponentName(node.type, 'VerticalCardBadge');
 }
 
 function isIconNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'VertCardIcon');
-}
-
-function isTitleNode(node: VNode): boolean {
-  return (
-    hasComponentName(node.type, 'VertCardTitle') ||
-    hasComponentName(node.type, 'VertCardHeading')
-  );
+  return hasComponentName(node.type, 'VerticalCardIcon');
 }
 
 function isContentNode(node: VNode): boolean {
-  return hasComponentName(node.type, 'VertCardContent');
+  return hasComponentName(node.type, 'VerticalCardContent');
 }
 
 const defaultNodes = computed(() => {
@@ -127,58 +112,38 @@ const slottedIcon = computed(() => {
   return defaultNodes.value.find(isIconNode);
 });
 
-const slottedTitle = computed(() => {
-  return defaultNodes.value.find(isTitleNode);
-});
-
 const slottedContent = computed(() => {
   return defaultNodes.value.find(isContentNode);
 });
 
 const otherSlottedNodes = computed(() => {
   return defaultNodes.value.filter((node) => {
-    return (
-      !isBadgeNode(node) &&
-      !isIconNode(node) &&
-      !isTitleNode(node) &&
-      !isContentNode(node)
-    );
+    return !isBadgeNode(node) && !isIconNode(node) && !isContentNode(node);
   });
 });
 
-const resolvedColor = computed(() => {
-  return props.color;
-});
-
-const resolvedLightColor = computed(() => {
-  return (
-    props.lightColor ??
-    hexToRgba({
-      alpha: 0.16,
-      hex: props.color,
-    })
-  );
+const customColor = computed(() => {
+  return props.color !== 'var(--alpha-vertical-card-accent)'
+    ? props.color
+    : undefined;
 });
 
-const resolvedStripeDarkColor = computed(() => {
-  return props.stripeColor ?? props.color;
+const resolvedColor = computed(() => {
+  return props.color;
 });
 
 const resolvedStripeLightColor = computed(() => {
-  return hexToRgba({
-    alpha: 0.55,
-    hex: props.color,
-  });
+  if (customColor.value) {
+    return `color-mix(in srgb, ${props.color} 55%, transparent)`;
+  }
+
+  return `var(--alpha-vertical-card-stripe-light, color-mix(in srgb, ${props.color} 55%, transparent))`;
 });
 
 const resolvedCardBg = computed(() => {
   return props.cardBg;
 });
 
-const resolvedTitleColor = computed(() => {
-  return props.titleColor ?? props.color;
-});
-
 const resolvedTextColor = computed(() => {
   return props.textColor;
 });
@@ -187,7 +152,7 @@ const resolvedStep = computed(() => {
   return props.step;
 });
 
-const resolvedBadgeVariant = computed<TVertCardBadgeVariant>(() => {
+const resolvedBadgeVariant = computed<TVerticalCardBadgeVariant>(() => {
   return props.variant ?? props.badgeVariant ?? 'outside';
 });
 
@@ -204,21 +169,18 @@ const isBadgeOutside = computed(() => {
 
 provide(VERT_CARD_KEY, {
   step: resolvedStep,
-  color: resolvedColor,
+  color: customColor as ComputedRef<string>,
   cardBg: resolvedCardBg,
-  lightColor: resolvedLightColor,
-  titleColor: resolvedTitleColor,
   badgeVariant: resolvedBadgeVariant,
-  stripeColor: resolvedStripeDarkColor,
   hasDivider: computed(() => props.hasDivider),
-  textColor: resolvedTextColor as ComputedRef<string | undefined>,
+  textColor: resolvedTextColor,
 });
 
 const BLOB_WIDTH = 128;
 const BLOB_HEIGHT = 112;
 
 const bottomBlobPath = computed(() => {
-  return createVertCardBottomBlobPath({
+  return createVerticalCardBottomBlobPath({
     blobHeight: 96,
     blobWidth: 128,
     borderRadius: 21,
@@ -228,7 +190,7 @@ const bottomBlobPath = computed(() => {
 });
 
 const topRightInnerBlobPath = computed(() => {
-  return createVertCardTopRightBlobPath({
+  return createVerticalCardTopRightBlobPath({
     blobHeight: 96,
     blobWidth: 128,
     borderRadius: 21,
@@ -238,7 +200,7 @@ const topRightInnerBlobPath = computed(() => {
 });
 
 const topRightOuterBlobPath = computed(() => {
-  return createVertCardTopRightBlobPath({
+  return createVerticalCardTopRightBlobPath({
     blobHeight: 76,
     blobWidth: 104,
     borderRadius: 21,
@@ -257,7 +219,7 @@ const isIconActive = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card relative inline-flex flex-col select-none rounded-[24px] border-[2.75px] border-solid font-sans',
+  'alpha-vertical-card relative flex flex-col w-full h-full select-none rounded-3xl border-[2.75px] border-solid border-(--alpha-vertical-card-accent) bg-(--alpha-vertical-card-bg) font-sans',
 );
 </script>
 
@@ -266,8 +228,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     v-bind="forwardedAttrs()"
     :class="className()"
     :style="{
-      borderColor: resolvedColor,
-      backgroundColor: resolvedCardBg,
+      '--alpha-vertical-card-accent': customColor,
+      '--alpha-vertical-card-title': customColor,
+      '--alpha-vertical-card-bg':
+        props.cardBg !== 'var(--alpha-vertical-card-bg)'
+          ? resolvedCardBg
+          : undefined,
     }"
   >
     <!-- Clipped decorative accent layers (responsive and symmetrical in opposite corners) -->
@@ -276,45 +242,47 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     >
       <!-- Bottom-left organic wave blob (kept as requested) -->
       <svg
+        aria-hidden="true"
         class="absolute bottom-0 left-0 w-32 h-28 pointer-events-none overflow-visible"
         viewBox="0 0 128 112"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          class="alpha-vert-card__blob"
+          class="alpha-vertical-card__blob"
           :d="bottomBlobPath"
           :fill="resolvedColor"
         />
       </svg>
       <!-- Top-right corner organic wave blob (symmetrical with bottom-left) -->
       <svg
+        aria-hidden="true"
         class="absolute top-0 right-0 w-32 h-28 pointer-events-none overflow-visible"
         viewBox="0 0 128 112"
         xmlns="http://www.w3.org/2000/svg"
       >
         <!-- Inner diagonal wave band (lighter tone) -->
         <path
-          class="alpha-vert-card__blob-top-inner"
+          class="alpha-vertical-card__blob-top-inner"
           :d="topRightInnerBlobPath"
           :fill="resolvedStripeLightColor"
         />
         <!-- Outer diagonal wave accent (accent tone) -->
         <path
-          class="alpha-vert-card__blob-top-outer"
+          class="alpha-vertical-card__blob-top-outer"
           :d="topRightOuterBlobPath"
-          :fill="resolvedStripeDarkColor"
+          :fill="resolvedColor"
         />
       </svg>
     </div>
     <!-- Ribbon Step Badge on left edge (pointing right into the card) -->
     <div
       v-if="isBadgeOutside && isBadgeVisible"
-      class="absolute -left-[20px] z-10"
-      :class="isIconActive ? 'top-[72px]' : 'top-[60px]'"
+      class="absolute -left-5 z-10"
+      :class="isIconActive ? 'top-18' : 'top-15'"
     >
       <slot name="badge">
         <component :is="slottedBadge" v-if="slottedBadge" />
-        <VertCardBadge v-else :step="resolvedStep" :color="resolvedColor" />
+        <VerticalCardBadge v-else :step="resolvedStep" :color="customColor" />
       </slot>
     </div>
     <!-- Card Content Layer -->
@@ -323,14 +291,13 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     >
       <!-- Optional Icon Circle (rendered when icon/slot is provided) -->
       <template v-if="isIconActive">
-        <div class="flex items-center justify-center flex-shrink-0 mb-3">
+        <div class="flex items-center justify-center shrink-0 mb-3">
           <slot name="icon">
             <component :is="slottedIcon" v-if="slottedIcon" />
-            <VertCardIcon
+            <VerticalCardIcon
               v-else
               :icon="props.icon"
-              :color="resolvedColor"
-              :light-color="resolvedLightColor"
+              :color="customColor"
               :size="108"
             />
           </slot>
@@ -341,24 +308,31 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
         :class="{ 'my-auto py-4': !isIconActive }"
       >
-        <slot name="title">
-          <component :is="slottedTitle" v-if="slottedTitle" />
-          <VertCardTitle
-            v-else-if="props.title"
-            :color="resolvedTitleColor"
-            :has-divider="props.hasDivider"
+        <div
+          v-if="$slots.title || props.title != null"
+          class="flex flex-col items-center w-full"
+        >
+          <h3
+            class="alpha-vertical-card-title font-sans font-bold tracking-tight leading-tight text-center text-(--alpha-vertical-card-title)"
           >
-            {{ props.title }}
-          </VertCardTitle>
-        </slot>
-        <slot name="description">
-          <component :is="slottedContent" v-if="slottedContent" />
-          <VertCardContent
-            v-else-if="props.description"
-            :color="resolvedTextColor"
+            <slot v-if="$slots.title" name="title" />
+            <component :is="props.title" v-else-if="isVNode(props.title)" />
+            <template v-else-if="typeof props.title === 'string'">{{
+              props.title
+            }}</template>
+          </h3>
+          <div
+            v-if="props.hasDivider"
+            class="mt-2.5 flex items-center justify-center w-32 relative"
           >
-            {{ props.description }}
-          </VertCardContent>
+            <div class="w-full h-[1.5px] bg-(--alpha-vertical-card-title)" />
+            <span
+              class="absolute w-2 h-2 rounded-full bg-(--alpha-vertical-card-title)"
+            />
+          </div>
+        </div>
+        <slot name="content">
+          <component :is="slottedContent" v-if="slottedContent" />
         </slot>
         <!-- Any other custom slotted components -->
         <component
@@ -368,7 +342,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         />
       </div>
       <!-- Bottom Row: Centered Decorative Indicator Dots -->
-      <div v-if="props.dots" class="flex justify-center items-center gap-2 pt-1">
+      <div
+        v-if="props.dots"
+        class="flex justify-center items-center gap-2 pt-1"
+      >
         <slot name="dots">
           <span
             class="w-2.5 h-2.5 rounded-full inline-block"

package/components/card/{vert-card/VertCardBadge.vue → vertical-card/VerticalCardBadge.vue}

@@ -3,16 +3,16 @@ import { computed, inject } from 'vue';
 
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import {
-  createVertCardBadgePath,
+  createVerticalCardBadgePath,
   VERT_CARD_KEY,
-} from '../../../utils/vertCard';
+} from '../../../utils/card/vertical-card';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'VertCardBadge',
+  name: 'VerticalCardBadge',
 });
 
-export interface IVertCardBadgeProps {
+export interface IVerticalCardBadgeProps {
   /**
    * Badge fill color. Overrides context color.
    */
@@ -23,7 +23,7 @@ export interface IVertCardBadgeProps {
   readonly step?: string | number;
 }
 
-const props = withDefaults(defineProps<IVertCardBadgeProps>(), {
+const props = withDefaults(defineProps<IVerticalCardBadgeProps>(), {
   step: undefined,
   color: undefined,
 });
@@ -31,14 +31,18 @@ const props = withDefaults(defineProps<IVertCardBadgeProps>(), {
 const context = inject(VERT_CARD_KEY, undefined);
 
 const resolvedColor = computed(() => {
-  return props.color ?? context?.color.value ?? '#ea583a';
+  return (
+    props.color ??
+    context?.color.value ??
+    'var(--alpha-vertical-card-badge-bg, var(--alpha-vertical-card-accent))'
+  );
 });
 
 const resolvedStep = computed(() => {
   return props.step ?? context?.step.value ?? '01';
 });
 
-const badgePath = createVertCardBadgePath({
+const badgePath = createVerticalCardBadgePath({
   width: 62,
   height: 48,
   tipRadius: 6,
@@ -48,14 +52,15 @@ const badgePath = createVertCardBadgePath({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-badge inline-flex items-center justify-center select-none',
+  'alpha-vertical-card-badge inline-flex items-center justify-center select-none',
 );
 </script>
 
 <template>
   <div v-bind="forwardedAttrs()" :class="className()">
     <svg
-      class="w-[62px] h-[48px] overflow-visible drop-shadow-sm"
+      aria-hidden="true"
+      class="w-15.5 h-12 overflow-visible drop-shadow-sm"
       viewBox="0 0 62 48"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -65,7 +70,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         y="24"
         text-anchor="middle"
         dominant-baseline="central"
-        fill="#ffffff"
+        fill="var(--alpha-vertical-card-badge)"
         class="font-sans font-bold text-[20px] tracking-tight"
       >
         <slot>{{ resolvedStep }}</slot>

package/components/card/{vert-card/VertCardContent.vue → vertical-card/VerticalCardContent.vue}

@@ -2,21 +2,21 @@
 import { computed, inject } from 'vue';
 
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../../utils/vertCard';
+import { VERT_CARD_KEY } from '../../../utils/card/vertical-card';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'VertCardContent',
+  name: 'VerticalCardContent',
 });
 
-export interface IVertCardContentProps {
+export interface IVerticalCardContentProps {
   /**
    * Content text color. Overrides context textColor.
    */
   readonly color?: string;
 }
 
-const props = withDefaults(defineProps<IVertCardContentProps>(), {
+const props = withDefaults(defineProps<IVerticalCardContentProps>(), {
   color: undefined,
 });
 
@@ -27,19 +27,20 @@ const contentColor = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-content mt-3 px-2 font-sans text-base leading-relaxed text-slate-600 dark:text-slate-300 opacity-90 text-center [&_p]:text-base [&_p]:m-0',
+  'alpha-vertical-card-content mt-3 px-2 font-sans leading-relaxed text-(--alpha-vertical-card-content) opacity-90 text-center',
 );
 </script>
 
 <template>
-  <div
+  <p
     v-bind="forwardedAttrs()"
     :class="className()"
-    :style="contentColor ? { color: contentColor } : undefined"
+    :style="
+      contentColor && !contentColor.includes('--alpha-vertical-card-content')
+        ? { '--alpha-vertical-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.
-    </slot>
-  </div>
+    <slot />
+  </p>
 </template>

package/components/card/{vert-card/VertCardIcon.vue → vertical-card/VerticalCardIcon.vue}

@@ -2,14 +2,14 @@
 import { computed, inject } from 'vue';
 
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import { hexToRgba, VERT_CARD_KEY } from '../../../utils/vertCard';
+import { VERT_CARD_KEY } from '../../../utils/card/vertical-card';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'VertCardIcon',
+  name: 'VerticalCardIcon',
 });
 
-export interface IVertCardIconProps {
+export interface IVerticalCardIconProps {
   /**
    * Optional icon class (e.g. 'i-carbon-search') or component.
    */
@@ -18,10 +18,6 @@ export interface IVertCardIconProps {
    * 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 108
@@ -29,32 +25,24 @@ export interface IVertCardIconProps {
   readonly size?: number | string;
 }
 
-const props = withDefaults(defineProps<IVertCardIconProps>(), {
+const props = withDefaults(defineProps<IVerticalCardIconProps>(), {
   size: 108,
   icon: undefined,
   color: undefined,
-  lightColor: undefined,
 });
 
 const context = inject(VERT_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({
-    alpha: 0.16,
-    hex: resolvedColor.value,
-  });
+  return undefined;
 });
 
 const resolvedSize = computed(() => {
@@ -71,7 +59,7 @@ const isComponentIcon = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-icon rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-transform duration-300 select-none',
+  'alpha-vertical-card-icon rounded-full border-2 border-(--alpha-vertical-card-icon) bg-(--alpha-vertical-card-icon-bg) text-(--alpha-vertical-card-icon) flex items-center justify-center shrink-0 transition-transform duration-300 select-none',
 );
 </script>
 
@@ -82,26 +70,20 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       width: resolvedSize,
       height: resolvedSize,
-      backgroundColor: resolvedLightColor,
-      borderColor: resolvedColor,
-      color: resolvedColor,
+      '--alpha-vertical-card-icon-bg': customLightColor,
+      '--alpha-vertical-card-icon': customColor,
     }"
   >
     <slot>
-      <component
-        :is="props.icon"
-        v-if="isComponentIcon"
-        class="text-4xl"
-        :style="{ color: resolvedColor }"
-      />
+      <component :is="props.icon" v-if="isComponentIcon" class="text-4xl" />
       <div
         v-else-if="isStringIcon && props.icon !== 'default'"
         :class="props.icon"
         class="text-4xl"
-        :style="{ color: resolvedColor }"
       />
       <!-- Default search icon matching the reference card -->
       <svg
+        aria-hidden="true"
         v-else
         class="w-12 h-12"
         viewBox="0 0 24 24"

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

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