@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/pyramid/circular-pyramid/{CircularPyramidStackTitle.vue → CircularPyramidStackHeading.vue}

@@ -5,21 +5,21 @@ import {
   CIRCULAR_PYRAMID_ROOT_KEY,
   CIRCULAR_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/circular-pyramid';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'CircularPyramidStackTitle',
+  name: 'CircularPyramidStackHeading',
+  inheritAttrs: false,
 });
 
-export interface ICircularPyramidStackTitleProps {
+export interface ICircularPyramidStackHeadingProps {
   readonly step?: string | number;
-  readonly title?: string;
   readonly color?: string;
   readonly minWidth?: number;
 }
 
-const props = withDefaults(defineProps<ICircularPyramidStackTitleProps>(), {
+const props = withDefaults(defineProps<ICircularPyramidStackHeadingProps>(), {
   step: undefined,
-  title: undefined,
   color: undefined,
   minWidth: 150,
 });
@@ -43,14 +43,12 @@ const resolvedStep = computed(() => {
   if (props.step !== undefined) {
     return props.step;
   }
+
   if (stackContext?.step.value !== undefined) {
     return stackContext.step.value;
   }
-  return '01';
-});
 
-const palette = computed(() => {
-  return rootContext?.palette.value;
+  return '01';
 });
 
 const minPillWidth = computed(() => props.minWidth ?? 150);
@@ -60,71 +58,73 @@ const stackColor = computed(() => {
     props.color ??
     stackContext?.color?.value ??
     rootContext?.color.value ??
-    '#3b82f6'
+    'var(--alpha-circular-pyramid-stack-heading-accent)'
   );
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'alpha-circular-pyramid-stack-heading__pill flex items-center gap-2 px-2.5 py-1 rounded-full text-xs font-semibold tracking-tight leading-tight transition-all duration-300 border shrink-0',
+  isActive.value
+    ? 'bg-(--alpha-circular-pyramid-stack-heading-border-active) text-(--alpha-circular-pyramid-stack-heading-active)'
+    : 'bg-(--alpha-circular-pyramid-stack-heading-border) text-(--alpha-circular-pyramid-stack-heading)',
+]);
 </script>
 
 <template>
   <div
-    class="alpha-circular-pyramid-stack-title relative w-full flex items-center select-none"
+    class="alpha-circular-pyramid-stack-heading relative w-full flex items-center select-none"
     :class="[
       isActive
-        ? 'alpha-circular-pyramid-stack-title--active'
-        : 'alpha-circular-pyramid-stack-title--default',
+        ? 'alpha-circular-pyramid-stack-heading--active'
+        : 'alpha-circular-pyramid-stack-heading--default',
     ]"
     :style="{
-      '--title-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+      '--title-delay': `calc(var(--alpha-circular-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
     }"
   >
     <!-- Pill Badge Container (min-width: 150px, max-width: whole spacing left leaving at least 30px before dot) -->
     <div
-      class="alpha-circular-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
-      :class="{
-        'alpha-circular-pyramid-stack-title__pill--animated': isAnimated,
-      }"
+      v-bind="forwardedAttrs()"
+      :class="
+        className({
+          'alpha-circular-pyramid-stack-heading__pill--animated': isAnimated,
+        })
+      "
       :style="{
         minWidth: `${minPillWidth}px`,
         maxWidth: 'calc(100% - 30px)',
         width: 'fit-content',
         boxSizing: 'border-box',
         borderColor: stackColor,
-        backgroundColor: isActive
-          ? 'rgba(255, 255, 255, 0.95)'
-          : 'rgba(255, 255, 255, 0.85)',
         boxShadow: isActive
-          ? `0 4px 14px ${stackColor}26`
+          ? `0 4px 14px color-mix(in srgb, ${stackColor} 15%, transparent)`
           : 'none',
       }"
     >
       <!-- Circular Step Indicator (Badge using stack color) -->
       <div
-        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight transition-all duration-300 flex-shrink-0"
+        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight text-(--alpha-circular-pyramid-stack-heading-number) transition-all duration-300 shrink-0"
         :style="{
           backgroundColor: stackColor,
-          color: '#ffffff',
         }"
       >
         <slot name="step">{{ resolvedStep }}</slot>
       </div>
       <!-- Title Text -->
-      <span
-        class="text-xs font-semibold tracking-tight transition-colors duration-300 pr-1 truncate flex-1 leading-tight"
-        :style="{
-          color: isActive ? '#0f172a' : '#334155',
-        }"
+      <h4
+        class="text-xs font-semibold tracking-tight leading-tight transition-colors duration-300 pr-1 truncate flex-1"
       >
-        <slot>{{ props.title }}</slot>
-      </span>
+        <slot>{{ '' }}</slot>
+      </h4>
     </div>
     <!-- Scalable Line between Title and Dot (always at least 30px) -->
     <div
-      class="alpha-circular-pyramid-stack-title__connector flex-1 flex items-center min-w-[30px] pointer-events-none"
+      class="alpha-circular-pyramid-stack-heading__connector flex-1 flex items-center min-w-7.5 pointer-events-none"
     >
       <div
-        class="alpha-circular-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
+        class="alpha-circular-pyramid-stack-heading__line flex-1 h-px transition-colors duration-300"
         :class="{
-          'alpha-circular-pyramid-stack-title__line--animated': isAnimated,
+          'alpha-circular-pyramid-stack-heading__line--animated': isAnimated,
         }"
         :style="{
           backgroundColor: stackColor,
@@ -132,15 +132,15 @@ const stackColor = computed(() => {
         }"
       />
       <div
-        class="alpha-circular-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
+        class="alpha-circular-pyramid-stack-heading__dot w-1.5 h-1.5 rounded-full shrink-0 -ml-1 transition-all duration-300"
         :class="{
-          'alpha-circular-pyramid-stack-title__dot--animated': isAnimated,
+          'alpha-circular-pyramid-stack-heading__dot--animated': isAnimated,
         }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
             ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
+            : `0 0 2px color-mix(in srgb, ${stackColor} 50%, transparent)`,
         }"
       />
     </div>
@@ -148,16 +148,18 @@ const stackColor = computed(() => {
 </template>
 
 <style scoped>
-.alpha-circular-pyramid-stack-title {
+.alpha-circular-pyramid-stack-heading {
   box-sizing: border-box;
 }
 
-.alpha-circular-pyramid-stack-title--active .alpha-circular-pyramid-stack-title__pill {
+.alpha-circular-pyramid-stack-heading--active
+  .alpha-circular-pyramid-stack-heading__pill {
   backdrop-filter: blur(8px);
 }
 
-.alpha-circular-pyramid-stack-title__dot--animated {
-  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--title-delay) both;
+.alpha-circular-pyramid-stack-heading__dot--animated {
+  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--title-delay) both;
 }
 
 @keyframes alpha-pyramid-title-dot-pop {
@@ -171,9 +173,10 @@ const stackColor = computed(() => {
   }
 }
 
-.alpha-circular-pyramid-stack-title__line--animated {
+.alpha-circular-pyramid-stack-heading__line--animated {
   transform-origin: right center;
-  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--title-delay) + 120ms) both;
+  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1)
+    calc(var(--title-delay) + 120ms) both;
 }
 
 @keyframes alpha-pyramid-title-line-draw {
@@ -191,8 +194,9 @@ const stackColor = computed(() => {
   }
 }
 
-.alpha-circular-pyramid-stack-title__pill--animated {
-  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--title-delay) + 380ms) both;
+.alpha-circular-pyramid-stack-heading__pill--animated {
+  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--title-delay) + 380ms) both;
 }
 
 @keyframes alpha-pyramid-title-pill-in {

package/components/pyramid/circular-pyramid/style.css

@@ -0,0 +1,26 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-circular-pyramid-accent: #3b82f6;
+    --alpha-circular-pyramid-center: #0f172a;
+    --alpha-circular-pyramid-connector-highlight: rgba(255, 255, 255, 0.5);
+    --alpha-circular-pyramid-stack-1-color: #3b82f6;
+    --alpha-circular-pyramid-stack-2-color: #6366f1;
+    --alpha-circular-pyramid-stack-3-color: #10b981;
+    --alpha-circular-pyramid-stack-4-color: #f59e0b;
+    --alpha-circular-pyramid-stack-5-color: #ec4899;
+    --alpha-circular-pyramid-stack-6-color: #06b6d4;
+    --alpha-circular-pyramid-stack-content: var(--alpha-foreground-primary, #475569);
+    --alpha-circular-pyramid-stack-content-accent: #3b82f6;
+    --alpha-circular-pyramid-stack-content-active: #0f172a;
+    --alpha-circular-pyramid-stack-content-border: rgba(255, 255, 255, 0.85);
+    --alpha-circular-pyramid-stack-content-border-active: rgba(255, 255, 255, 0.95);
+    --alpha-circular-pyramid-highlight: #fff;
+    --alpha-circular-pyramid-stack-heading: var(--alpha-foreground-primary, #334155);
+    --alpha-circular-pyramid-stack-heading-accent: #3b82f6;
+    --alpha-circular-pyramid-stack-heading-active: #0f172a;
+    --alpha-circular-pyramid-stack-heading-border: rgba(255, 255, 255, 0.85);
+    --alpha-circular-pyramid-stack-heading-border-active: rgba(255, 255, 255, 0.95);
+    --alpha-circular-pyramid-stack-heading-number: #fff;
+  }
+}