More tile highlights options

d0rich · Aug 23, 2024 · d54be62 · d54be62
1 parent 67fee8c
commit d54be62
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 19 deletions.
diff --git a/.changeset/calm-pears-happen.md b/.changeset/calm-pears-happen.md
@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+More tile highlights options
diff --git a/apps/design.d0rich.me/components/B5Buttons.vue b/apps/design.d0rich.me/components/B5Buttons.vue
@@ -31,10 +31,40 @@
           </p>
           <ul>
             <li>
-              <DBtn no-rotate> Button </DBtn>
+              <DBtn no-rotate highlight="tile"> Tile </DBtn>
             </li>
             <li>
-              <DBtn no-rotate active> Active button </DBtn>
+              <DBtn no-rotate highlight="tile" active> Active tile </DBtn>
+            </li>
+            <li>
+              <DBtn highlight="tile" no-rotate color-class="bg-blue-600">
+                Custom color
+              </DBtn>
+            </li>
+            <li>
+              <DBtn no-rotate> Negative </DBtn>
+            </li>
+            <li>
+              <DBtn no-rotate active> Active negative </DBtn>
+            </li>
+            <li>
+              <DBtn
+                highlight="composite-tile"
+                no-rotate
+                color-class="bg-blue-600"
+              >
+                Composite
+              </DBtn>
+            </li>
+            <li>
+              <DBtn
+                highlight="composite-tile"
+                no-rotate
+                active
+                color-class="bg-blue-600"
+              >
+                Active Composite
+              </DBtn>
             </li>
           </ul>
         </DCard>
@@ -48,7 +78,11 @@
           </p>
 
           <ul class="isolate">
-            <li>highlight="list-item" > List highlight</li>
+            <li>
+              <DBtn no-rotate highlight="list-item">
+                Active list highlight
+              </DBtn>
+            </li>
             <li>
               <DBtn no-rotate highlight="list-item" active>
                 Active list highlight

diff --git a/packages/esprit-design/src/components/buttons/DBtn.vue b/packages/esprit-design/src/components/buttons/DBtn.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   },
   colorClass: {
     type: [String, Object as () => Record<string, boolean>],
-    default: ''
+    default: undefined
   },
   textTransform: {
     type: String as () => 'uppercase' | 'capitalize' | 'lowercase' | 'none',

diff --git a/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue b/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue
@@ -12,7 +12,9 @@ export default {
 
 <script setup lang="ts">
 export type HighlightVariant =
+  | 'tile'
   | 'negative-tile'
+  | 'composite-tile'
   | 'list-item'
   | 'negative-list-item'
   | 'composite-list-item'
@@ -69,27 +71,38 @@ const currentComponent = computed(() => {
         class="d-focus-hl__hl--negative-tile"
       />
       <div
-        v-else-if="variant === 'list-item'"
-        class="d-focus-hl__hl--list-item"
+        v-else-if="variant === 'tile' || variant === 'composite-tile'"
+        class="d-focus-hl__hl--tile"
         :class="colorClass"
       />
       <div
         v-else-if="variant === 'negative-list-item'"
         class="d-focus-hl__hl--negative-list-item"
       />
-      <template v-else-if="variant === 'composite-list-item'">
-        <div class="d-focus-hl__hl--list-item" :class="colorClass" />
-        <div class="d-focus-hl__hl--negative-list-item" />
-      </template>
+      <div
+        v-else-if="variant === 'list-item' || variant === 'composite-list-item'"
+        class="d-focus-hl__hl--list-item"
+        :class="colorClass"
+      />
+
       <slot />
+
+      <div
+        v-if="variant === 'composite-tile'"
+        class="d-focus-hl__hl--negative-tile"
+      />
+      <div
+        v-else-if="variant === 'composite-list-item'"
+        class="d-focus-hl__hl--negative-list-item"
+      />
     </Component>
   </DWrapShape>
 </template>
 
 <!-- common -->
 <style>
 .d-focus-hl {
-  @apply relative;
+  @apply relative isolate;
 }
 .d-focus-hl--default-color {
   @apply bg-red-600;
@@ -98,35 +111,43 @@ const currentComponent = computed(() => {
 
 <!-- negative-tile -->
 <style>
-.d-focus-hl:has(.d-focus-hl__hl--negative-tile) {
+.d-focus-hl:has(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   @apply w-fit;
 }
 
-.d-focus-hl > .d-focus-hl__hl--negative-tile {
+.d-focus-hl > :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   width: 0%;
   height: 0%;
   top: 50%;
   left: 50%;
   content: '';
   opacity: 0;
   pointer-events: none;
-  @apply absolute backdrop-invert transition-all;
+  @apply absolute transition-all;
+}
+
+.d-focus-hl > .d-focus-hl__hl--negative-tile {
+  @apply backdrop-invert;
+}
+
+.d-focus-hl > .d-focus-hl__hl--tile {
+  @apply -z-10;
 }
 
-.d-focus-hl:hover > .d-focus-hl__hl--negative-tile,
-.d-focusable:focus .d-focus-hl__hl--negative-tile {
+.d-focus-hl:hover > :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile),
+.d-focusable:focus :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   opacity: 1;
   animation: hl--negative-tile-animation linear 1s infinite;
 }
 
-.d-focus-hl:hover > .d-focus-hl__hl--negative-tile {
+.d-focus-hl:hover > :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   width: 110%;
   height: 130%;
   top: -15%;
   left: -5%;
 }
 
-.d-focusable:focus .d-focus-hl__hl--negative-tile {
+.d-focusable:focus :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   width: 140% !important;
   height: 200% !important;
   top: -50% !important;
@@ -142,7 +163,7 @@ const currentComponent = computed(() => {
       ),
     .d-focus-hl--active
   )
-  :is(.d-focus-hl__hl--negative-tile) {
+  :is(.d-focus-hl__hl--negative-tile, .d-focus-hl__hl--tile) {
   opacity: 1;
   width: 120% !important;
   height: 120% !important;