skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-20 18:16:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Mute design-context tile accents at rest like Color.

Browse Source 
Product, Brand, Typography, and Material vignettes now use anim-join so their gold accent reads at 25% opacity before hover and brightens on hover, matching the Color tile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:40 +05:00
co-authored by Cursor
parent adabd62011
commit 6d684d2d6a
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
picker/pages/index.astro
+7 -7
View File
@@ -1292,8 +1292,8 @@ const questions = [
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
<line x1="8" y1="13" x2="26" y2="13" stroke="var(--viz-ink)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
<line x1="8" y1="19" x2="30" y2="19" stroke="var(--viz-mist)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
<line x1="8" y1="25" x2="22" y2="25" stroke="var(--viz-accent)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
<line x1="26" y1="23" x2="26" y2="27" stroke="var(--viz-accent)" class="anim-blink vz-stroke" vector-effect="non-scaling-stroke"></line>
<line x1="8" y1="25" x2="22" y2="25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-join vz-stroke" vector-effect="non-scaling-stroke"></line>
<line x1="26" y1="23" x2="26" y2="27" stroke="var(--viz-accent)" class="anim-blink anim-join vz-stroke" vector-effect="non-scaling-stroke"></line>
</svg>
</span>
<h2 class="dcx-tile-title">Product</h2>
@@ -1304,8 +1304,8 @@ const questions = [
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
<path d="M6 17 L34 17" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
<path d="M12 10 L16 17 L20 33 M28 10 L24 17 L20 33" stroke="var(--viz-mist)" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
<path d="M12 10 L28 10 L34 17 L20 33 L6 17 Z" stroke="var(--viz-accent)" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
<circle cx="20" cy="13.5" r="1.4" fill="var(--viz-accent)" class="anim-fade-in"></circle>
<path d="M12 10 L28 10 L34 17 L20 33 L6 17 Z" stroke="var(--viz-accent)" stroke-linejoin="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
<circle cx="20" cy="13.5" r="1.4" fill="var(--viz-accent)" class="anim-join"></circle>
</svg>
</span>
<h2 class="dcx-tile-title">Brand</h2>
@@ -1326,8 +1326,8 @@ const questions = [
<span class="dcx-tile-viz" aria-hidden="true">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
<path d="M10 30L20 10L30 30" stroke="var(--viz-mist)" stroke-linecap="round" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
<path d="M10 30L20 10L30 30" stroke="var(--viz-accent)" stroke-linecap="round" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
<path d="M15 22H25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw-delay vz-stroke" vector-effect="non-scaling-stroke"></path>
<path d="M10 30L20 10L30 30" stroke="var(--viz-accent)" stroke-linecap="round" stroke-linejoin="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
<path d="M15 22H25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw-delay anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
</svg>
</span>
<h2 class="dcx-tile-title">Typography</h2>
@@ -1351,7 +1351,7 @@ const questions = [
<rect x="5" y="10" width="30" height="18.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></rect>
<line x1="23.5" y1="10" x2="23.5" y2="28.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></line>
<line x1="23.5" y1="21.5" x2="35" y2="21.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></line>
<path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
<path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
</svg>
</span>
<h2 class="dcx-tile-title">Material</h2>