feat(component): enhanced dt7 styles to modal, tooltip, card, popover…

… (#763)
dialpad · Dec 20, 2022 · 7f6f062 · 7f6f062
1 parent 7850745
commit 7f6f062
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 138 deletions.
diff --git a/docs/.vuepress/baseComponents/DialtoneUsage.vue b/docs/.vuepress/baseComponents/DialtoneUsage.vue
@@ -2,7 +2,7 @@
   <div class="dialtone-usage">
     <div class="dialtone-usage__item dialtone-usage__item--do">
       <h3 class="dialtone-usage__hd dialtone-usage__hd--do">
-        <icon-checkmark />
+        <dt-icon name="thumbs-up" />
         Do
       </h3>
       <div class="dialtone-usage__bd">
@@ -11,7 +11,7 @@
     </div>
     <div class="dialtone-usage__item dialtone-usage__item--dont">
       <h3 class="dialtone-usage__hd dialtone-usage__hd--dont">
-        <icon-close />
+        <dt-icon name="thumbs-down" />
         Don’t
       </h3>
       <div class="dialtone-usage__bd">

diff --git a/docs/.vuepress/exampleComponents/ExampleModal.vue b/docs/.vuepress/exampleComponents/ExampleModal.vue
@@ -9,7 +9,7 @@
   <aside
     id="modal-base"
     ref="modal"
-    class="d-modal d-mn1"
+    class="d-modal d-m0"
     :class="{
       'd-modal--full': isFullScreen,
       'd-modal--danger': isDanger,

diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -208,13 +208,13 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
       <span class="d-badge">Customer</span>
       <span class="d-badge">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Lock" class="d-icon d-icon--lock d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><g clip-path="url(#a)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.5 6a.5.5 0 0 0-.5.5V10a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V6.5a.5.5 0 0 0-.5-.5h-7ZM1 6.5A1.5 1.5 0 0 1 2.5 5h7A1.5 1.5 0 0 1 11 6.5V10a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 1 10V6.5Z"></path><path d="M6 1.5a2 2 0 0 0-2 2v2a.5.5 0 1 1-1 0v-2a3 3 0 1 1 6 0v2a.5.5 0 1 1-1 0v-2a2 2 0 0 0-2-2Z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"></path></clipPath></defs></svg>
+          <dt-icon name="lock" size="200" />
         </span>
         <span class="d-badge__label">Locked</span>
         </span>
       <span class="d-badge">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Message" class="d-icon d-icon--message d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M3 2a.5.5 0 0 0-.5.5v6.793l1.146-1.147A.5.5 0 0 1 4 8h6a.5.5 0 0 0 .5-.5v-5A.5.5 0 0 0 10 2H3Zm-1.06-.56A1.5 1.5 0 0 1 3 1h7a1.5 1.5 0 0 1 1.5 1.5v5A1.5 1.5 0 0 1 10 9H4.207l-1.853 1.854A.5.5 0 0 1 1.5 10.5v-8c0-.398.158-.78.44-1.06Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="message" size="200" />
         </span>
         <span class="d-badge__label">Chat log</span>
       </span>
@@ -241,7 +241,7 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
     <div class="d-d-flex d-gg8 d-ai-center">
       <span class="d-badge d-badge--critical">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Record Filled" class="d-icon d-icon--recordFilled d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M6 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM1 6a5 5 0 1 1 10 0A5 5 0 0 1 1 6Z" clip-rule="evenodd"></path><path fill="currentColor" d="M8.5 6a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"></path><path fill="currentColor" fill-rule="evenodd" d="M6 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="record-filled" size="200" />
         </span>
         <span class="d-badge__label">Recording</span>
       </span>
@@ -257,28 +257,28 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
     <div class="d-d-flex d-gg8 d-ai-center">
       <span class="d-badge d-badge--ai">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Dialpad Ai" class="d-icon d-icon--dialpadAi d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M10.25 2a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm-5.722.5c-.415 0-.886.352-1.108 1.058v.001L1.476 9.652a.5.5 0 1 1-.952-.304l1.943-6.09c0-.001 0 0 0 0C2.765 2.308 3.518 1.5 4.528 1.5s1.761.806 2.06 1.753l1.498 4.692C8.308 8.65 8.777 9 9.193 9c.735 0 1.307-.576 1.307-1.257V4.53a.5.5 0 0 1 1 0v3.212C11.5 9.003 10.454 10 9.193 10c-1.009 0-1.761-.806-2.06-1.753l-1.497-4.69v-.002C5.412 2.85 4.943 2.5 4.527 2.5Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="dialpad-ai" size="200" />
         </span>
         <span class="d-vi-visible-sr">Ai</span>
         <span class="d-badge__label">Notes</span>
       </span>
       <span class="d-badge d-badge--ai">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Dialpad Ai" class="d-icon d-icon--dialpadAi d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M10.25 2a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm-5.722.5c-.415 0-.886.352-1.108 1.058v.001L1.476 9.652a.5.5 0 1 1-.952-.304l1.943-6.09c0-.001 0 0 0 0C2.765 2.308 3.518 1.5 4.528 1.5s1.761.806 2.06 1.753l1.498 4.692C8.308 8.65 8.777 9 9.193 9c.735 0 1.307-.576 1.307-1.257V4.53a.5.5 0 0 1 1 0v3.212C11.5 9.003 10.454 10 9.193 10c-1.009 0-1.761-.806-2.06-1.753l-1.497-4.69v-.002C5.412 2.85 4.943 2.5 4.527 2.5Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="dialpad-ai" size="200" />
         </span>
         <span class="d-vi-visible-sr">Ai</span>
         <span class="d-badge__label">Suggestion</span>
       </span>
       <span class="d-badge d-badge--ai">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Dialpad Ai" class="d-icon d-icon--dialpadAi d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M10.25 2a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm-5.722.5c-.415 0-.886.352-1.108 1.058v.001L1.476 9.652a.5.5 0 1 1-.952-.304l1.943-6.09c0-.001 0 0 0 0C2.765 2.308 3.518 1.5 4.528 1.5s1.761.806 2.06 1.753l1.498 4.692C8.308 8.65 8.777 9 9.193 9c.735 0 1.307-.576 1.307-1.257V4.53a.5.5 0 0 1 1 0v3.212C11.5 9.003 10.454 10 9.193 10c-1.009 0-1.761-.806-2.06-1.753l-1.497-4.69v-.002C5.412 2.85 4.943 2.5 4.527 2.5Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="dialpad-ai" size="200" />
         </span>
         <span class="d-vi-visible-sr">Ai</span>
         <span class="d-badge__label">enabled</span>
       </span>
       <span class="d-badge d-badge--ai">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Dialpad Ai" class="d-icon d-icon--dialpadAi d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M10.25 2a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm-5.722.5c-.415 0-.886.352-1.108 1.058v.001L1.476 9.652a.5.5 0 1 1-.952-.304l1.943-6.09c0-.001 0 0 0 0C2.765 2.308 3.518 1.5 4.528 1.5s1.761.806 2.06 1.753l1.498 4.692C8.308 8.65 8.777 9 9.193 9c.735 0 1.307-.576 1.307-1.257V4.53a.5.5 0 0 1 1 0v3.212C11.5 9.003 10.454 10 9.193 10c-1.009 0-1.761-.806-2.06-1.753l-1.497-4.69v-.002C5.412 2.85 4.943 2.5 4.527 2.5Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="dialpad-ai" size="200" />
         </span>
         <span class="d-vi-visible-sr">Ai</span>
         <span class="d-badge__label">Transcript</span>
@@ -294,7 +294,7 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
     <div class="d-d-flex d-gg8 d-ai-center">
       <span class="d-badge d-badge--count d-badge--success">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Arrow Up" class="d-icon d-icon--arrowUp d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M5.646 2.146a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1-.708.708L6.5 3.707V9.5a.5.5 0 0 1-1 0V3.707L2.854 6.354a.5.5 0 1 1-.708-.708l3.5-3.5Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="arrow-up" size="200" />
         </span>
         <span class="d-badge__label">5%</span>
       </span>
@@ -304,7 +304,7 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
     <div class="d-d-flex d-gg8 d-ai-center">
       <span class="d-badge d-badge--count d-badge--critical">
         <span class="d-badge__icon-left">
-          <svg aria-hidden="true" data-name="Arrow Down" class="d-icon d-icon--arrowDown d-icon--size-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" data-v-68a9d516=""><path fill="currentColor" fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .5.5v5.793l2.646-2.647a.5.5 0 1 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5.5 8.293V2.5A.5.5 0 0 1 6 2Z" clip-rule="evenodd"></path></svg>
+          <dt-icon name="arrow-down" size="200" />
         </span>
         <span class="d-badge__label">-12%</span>
       </span>

diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -7,27 +7,37 @@ storybook_url: https://vue.dialpad.design/?path=/story/components-modal--default
 figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8923%3A20396&viewport=-724%2C-52%2C0.38&t=xHutRjwo1o5zMTgT-11
 ---
 <code-well-header>
-  <div class="d-d-grid d-gg16 d-g-cols4 d-fs-200">
-    <figure class="d-m0">
-      <img class="d-bar4 d-w100p" alt="Modal screen: Base" :src="$withBase('/assets/images/screen-modal--base.png')">
-      <figcaption><a class="d-link d-td-none" href="#base-style">Base Style</a></figcaption>
-      <!-- <example-modal kind="base" /> -->
-    </figure>
-    <figure class="d-m0">
-      <img class="d-bar4 d-w100p" alt="Modal screen: Fixed header and footer" :src="$withBase('/assets/images/screen-modal--fixed-header-and-footer.png')">
-      <figcaption><a class="d-link d-td-none" href="#fixed-header-and-footer">Fixed header and footer</a></figcaption>
-      <!-- <example-modal kind="fixed" /> -->
-    </figure>
-    <figure class="d-m0">
-      <img class="d-bar4 d-w100p" alt="Modal screen: Danger" :src="$withBase('/assets/images/screen-modal--danger.png')">
-      <figcaption><a class="d-link d-td-none" href="#danger">Danger</a></figcaption>
-      <!-- <example-modal kind="danger" /> -->
-    </figure>
-    <figure class="d-m0">
-      <img class="d-bar4 d-w100p" alt="Modal screen: Full Screen" :src="$withBase('/assets/images/screen-modal--fullscreen.png')">
-      <figcaption><a class="d-link d-td-none" href="#full-screen">Full Screen</a></figcaption>
-      <!-- <example-modal kind="full-screen" /> -->
-    </figure>
+  <div class="d-d-grid d-gg16 d-g-cols4 md:d-g-cols2 d-fs-200">
+    <a class="d-link d-td-none" href="#base-style">
+      <figure class="d-m0">
+        <img class="d-bar4 d-w100p" alt="Modal screen: Base" :src="$withBase('/assets/images/screen-modal--base.png')">
+        <figcaption>Base Style</figcaption>
+      </figure>
+    </a>
+    <a class="d-link d-td-none" href="#fixed-header-and-footer">
+      <figure class="d-m0">
+        <img class="d-bar4 d-w100p" alt="Modal screen: Fixed header and footer" :src="$withBase('/assets/images/screen-modal--fixed-header-and-footer.png')">
+        <figcaption>
+          Fixed header and footer
+        </figcaption>
+      </figure>
+    </a>
+    <a class="d-link d-td-none" href="#danger">
+      <figure class="d-m0">
+        <img class="d-bar4 d-w100p" alt="Modal screen: Danger" :src="$withBase('/assets/images/screen-modal--danger.png')">
+        <figcaption>
+          Danger
+        </figcaption>
+      </figure>
+    </a>
+    <a class="d-link d-td-none" href="#full-screen">
+      <figure class="d-m0">
+        <img class="d-bar4 d-w100p" alt="Modal screen: Full Screen" :src="$withBase('/assets/images/screen-modal--fullscreen.png')">
+        <figcaption>
+          Full Screen
+        </figcaption>
+      </figure>
+    </a>
   </div>
 </code-well-header>
 

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -6,10 +6,10 @@ desc: A tooltip is a floating label that briefly explains an action, function, o
 storybook_url: https://vue.dialpad.design/?path=/story/components-tooltip--default
 figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8919%3A21626&viewport=-614%2C359%2C0.86&t=xHutRjwo1o5zMTgT-11
 ---
-<code-well-header bgclass="d-bgc-black-100" class='d-hmn264'>
+<code-well-header bgclass="d-bgc-black-100" class='d-hmn164'>
   <button class="d-btn d-btn--outlined d-tooltip--hover" type="button">
     <div class="d-tooltip d-tooltip__arrow--bottom-center d-ps-absolute">
-      <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
+      <span>Simple tooltip</span>
     </div>
     <span>Hover over me to see a tooltip</span>
   </button>
@@ -22,62 +22,42 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
 
 ### Base Styles
 
-<code-well-header bgclass="d-bgc-black-100" class='d-hmn264'>
-  <button class="d-btn d-btn--outlined d-tooltip--hover" type="button">
-      <div class="d-tooltip d-tooltip__arrow--bottom-center d-ps-absolute">
-          <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
-      </div>
-      <span>Hover over me to see a tooltip</span>
-  </button>
-</code-well-header>
-
-```html
-<button class="d-btn d-btn--outlined d-tooltip--hover" type="button">
-    <div class="d-tooltip d-tooltip__arrow--bottom-center d-ps-absolute">
-        <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
-    </div>
-    <span>Hover over me to see a tooltip</span>
-</button>
-```
-
 <code-well-header>
   <div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--show">
-    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
+    <span>Tooltip</span>
   </div>
 </code-well-header>
 
 ```html
 <div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--show">
-    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
+    <span>Tooltip</span>
 </div>
 ```
 
 <code-well-header bgclass="d-bgc-black-800">
   <div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--inverted d-tooltip--show">
-    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
+    <span>Tooltip</span>
   </div>
 </code-well-header>
 
 ```html
 <div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--inverted d-tooltip--show">
-    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
+    <span>Tooltip</span>
 </div>
 ```
 
 ### Arrow Directions
 
 No arrow direction is assigned by default. You must select a direction. Twelve directions are offered: three on each face of the tooltip.
 
-<code-well-header>
-  <div v-for="dir in directions" class="d-w40p d-p12">
+<div class="d-d-grid d-gg16 d-g-cols3 sm:d-g-cols1 md:d-g-cols2">
+  <div v-for="dir in directions" class="d-p32 d-bgc-black-100 d-bar8">
     <div class="d-tooltip d-tooltip--show" :class="'d-tooltip__arrow--'+dir">
-      <span class="d-ff-mono d-fs-100 d-mb4">.d-tooltip__arrow--{{ dir }}</span>
-      <div>
-        <span>Arrow appears {{ capitalizeDirection(dir) }}.</span>
-      </div>
+      <div class="d-tt-capitalize d-mb4">{{ capitalizeDirection(dir) }}</div>
+      <div class="d-code-small d-fc-black-400">.d-tooltip__arrow--{{ dir }}</div>
     </div>
   </div>
-</code-well-header>
+</div>
 
 ## Classes
 

diff --git a/lib/build/less/components/modal.less b/lib/build/less/components/modal.less
@@ -28,9 +28,12 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 60%);
+    --modal-dialog-padding: var(--space-600);
     --modal-dialog-color-background: var(--white);
     --modal-dialog-color-text: var(--fc-tertiary);
     --modal-header-color-text: var(--fc-secondary);
+    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
+    --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
 
     position: fixed;
     top: 0;
@@ -78,16 +81,20 @@
 .d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-500); //
   width: 100%;
   max-width: calc(var(--size-300) * 157); // 628
   max-height: 100%;
+  padding: var(--modal-dialog-padding); // 32
   overflow-y: auto;
   color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
-  line-height: var(--lh8);
+  line-height: var(--lh-400);
   background-color: var(--modal-dialog-color-background);
-  border-radius: var(--br8);
-  box-shadow: var(--bs-card);
+  border-radius: var(--size-500);
+  box-shadow: var(--modal-dialog-shadow);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
   backface-visibility: hidden;
   visibility: hidden;
@@ -116,16 +123,8 @@
 
   display: flex;
   flex-direction: row-reverse;
+  gap: var(--space-400);
   align-items: center;
-  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding); // 0 24 24 24
-
-  >:not(:first-child) {
-    margin-right: var(--space-300); // 4
-  }
-
-  >:not(:last-child) {
-    margin-left: var(--space-300); // 4
-  }
 }
 
 
@@ -138,19 +137,16 @@
   --modal-header-padding: calc(var(--space-300) * 6); // 24
 
   margin: 0 !important;
-  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
   color: var(--modal-header-color-text);
-  font-weight: var(--fw-bold);
-  font-size: var(--fs-300);
-  line-height: var(--lh4);
+  font-weight: var(--fw-medium);
+  font-size: var(--fs-400);
+  line-height: var(--lh-100);
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: calc(var(--space-300) * 3) 0; // 12 0
-  padding: var(--space-300) calc(var(--space-300) * 6); // 4 24
 }
 
 
@@ -159,8 +155,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  top: var(--space-400); // 8
-  right: var(--space-400); // 8
+  top: var(--space-500); // 16
+  right: var(--space-500); // 16
   margin: 0 !important;
 }
 
@@ -169,15 +165,33 @@
 //  $   BANNERS
 //  ----------------------------------------------------------------------------
 .d-modal__banner {
+  --modal-banner-padding-y: var(--space-500);
+  --modal-banner-padding-x: var(--space-600);
+  --modal-banner-color-background: var(--gold-100);
+
   position: relative;
   box-sizing: border-box;
   width: 100%;
   max-width: calc(var(--size-300) * 157); // 628
-  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6); // 12 24
+  padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
+  color: var(--fc-primary);
   font-size: var(--fs-200);
-  line-height: var(--lh4);
-  background-color: var(--gold-100);
-  border-radius: var(--br8) var(--br8) 0 0;
+  line-height: var(--lh-300);
+  background-color: var(--modal-banner-color-background);
+  border-radius: var(--size-500) var(--size-500) 0 0;
+  box-shadow: var(--modal-dialog-shadow);
+
+  &::before {
+    // 🤦 don't ask. or do, i'm not even sorry.
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--zi-modal-element);
+    height: var(--modal-banner-padding-y);
+    background-color: var(--modal-banner-color-background);
+    content: '';
+  }
 
   &:not(.d-d-none) + .d-modal__dialog {
     border-top-left-radius: 0;
@@ -192,6 +206,8 @@
 //  $$  FULL WIDTH
 //  ----------------------------------------------------------------------------
 .d-modal--full {
+  --modal-dialog-padding: 0;
+
   padding: 0;
   overflow: hidden scroll;
   transform: unset !important;