feat(component): button, input, textarea, select enhanced dt7 styles …

…(#771)

In addition to aligning styles for button, input, textarea, and select, the Dialtone doc site received a little bit of love to polish it a touch here and there.

docs/.vuepress/baseComponents/BlogPost.vue

@@ -1,50 +1,52 @@
 <!-- eslint-disable max-len -->
 <template>
-  <article class="blog-post d-d-grid d-p12 d-g-cols2">
-    <section class="d-d-flex">
-      <dt-avatar
-        size="lg"
-        color="purple-200"
-        avatar-class="d-mr16"
-      >
-        {{ initials }}
-      </dt-avatar>
-      <div class="d-d-grid d-g-cols1">
-        <div class="d-fw-medium">
-          {{ author }}
-        </div>
-        <time class="d-fc-black-700">
-          {{ format(posted, 'MMMM do, y') }}
-        </time>
-      </div>
-    </section>
-    <div
-      class="d-pls-end"
-    >
-      <dt-tooltip v-if="!isPreview">
-        <template #anchor>
-          <dt-button
-            kind="inverted"
-            @click="copyLink"
-          >
-            <template #icon>
-              <dt-icon name="copy" />
-            </template>
-          </dt-button>
-        </template>
-        Copy link
-      </dt-tooltip>
-    </div>
-    <section class="d-gc-full">
+  <article class="blog-post">
+    <section class="d-stack16">
       <component
         :is="isPreview ? 'h2' : 'h1'"
-        class="d-pt24 dialtone-page-title"
+        class="d-d-flex"
+        :class="isPreview ? 'd-docsite--header-2 d-mt0' : 'dialtone-page-title'"
       >
-        {{ heading }}
+        <div class=" d-fl1">
+          {{ heading }}
+        </div>
+        <dt-tooltip v-if="!isPreview">
+          <template #anchor>
+            <dt-button
+              size="sm"
+              kind="inverted"
+              @click="copyLink"
+            >
+              <template #icon>
+                <dt-icon name="copy" size="300" />
+              </template>
+            </dt-button>
+          </template>
+          Copy link
+        </dt-tooltip>
       </component>
-      <span class="blog-post-content">
+      <div class="d-d-flex d-ai-center">
+        <section class="d-d-flex">
+          <dt-avatar
+            size="lg"
+            color="purple-200"
+            avatar-class="d-mr16"
+          >
+            {{ initials }}
+          </dt-avatar>
+          <div class="d-d-grid d-g-cols1">
+            <div class="d-fw-semibold d-fc-secondary">
+              {{ author }}
+            </div>
+            <time class="d-fc-tertiary">
+              {{ format(posted, 'MMMM do, y') }}
+            </time>
+          </div>
+        </section>
+      </div>
+      <div class="blog-post-content">
         <slot />
-      </span>
+      </div>
     </section>
   </article>
 </template>

docs/.vuepress/baseComponents/BlogPostPreview.vue

@@ -10,7 +10,7 @@
       @click="(e) => { navigate(e); }"
     >
       <dt-card
-        class="d-mt72 h:d-bgc-black-200"
+        class="d-mt32 h:d-bgc-black-100 d-bs-none h:d-bs-sm d-ba d-bar8 d-bbw1 d-bc-black-300"
       >
         <template #content>
           <blog-post

docs/.vuepress/exampleComponents/ExampleBanner.vue

@@ -72,7 +72,7 @@
                 class="d-checkbox"
               >
             </div>
-            <span class="d-checkbox__copy d-checkbox__label d-mb6 d-fw-bold">
+            <span class="d-checkbox__copy d-checkbox__label d-mb4">
               Important?
             </span>
           </div>
@@ -86,7 +86,7 @@
                 class="d-checkbox"
               >
             </div>
-            <span class="d-checkbox__copy d-checkbox__label d-mb6 d-fw-bold">
+            <span class="d-checkbox__copy d-checkbox__label d-mb4">
               Pinned?
             </span>
           </div>
@@ -120,7 +120,9 @@
         <icon-warning v-show="kind === 'warning'" />
       </div>
       <div class="d-notice__content">
-        <h2>Optional title</h2>
+        <h2 class="d-notice__title">
+          Optional title
+        </h2>
         <p class="d-notice__message">
           Message body with
           <a
@@ -196,6 +198,7 @@ export default {
 
 <style scoped>
 .d-banner {
+  top: -64px;
   margin-top: 0 !important;
 }
 </style>

docs/.vuepress/exampleComponents/ExampleChip.vue

@@ -22,7 +22,10 @@
         v-if="withIcon"
         class="d-chip__icon"
       >
-        <icon-phone />
+        <dt-icon
+          name="phone"
+          size="200"
+        />
       </span>
       <span :class="{ 'd-truncate': truncate }">{{ label }}</span>
     </component>
@@ -34,7 +37,12 @@
       <span
         ref="closeBtn"
         class="d-btn__icon"
-      ><icon-close /></span>
+      >
+        <dt-icon
+          name="close"
+          size="200"
+          />
+      </span>
     </button>
   </span>
 </template>

docs/.vuepress/exampleComponents/ExampleToast.vue

@@ -72,7 +72,7 @@
                 class="d-checkbox"
               >
             </div>
-            <span class="d-checkbox__copy d-checkbox__label d-mb6 d-fw-bold">
+            <span class="d-checkbox__copy d-checkbox__label d-mb4">
               Important?
             </span>
           </div>