chore(pv-stylemark): optimize example styles

pro-vision · Feb 21, 2024 · bed1ba7 · bed1ba7
1 parent f03a00a
commit bed1ba7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/packages/pv-stylemark/tasks/templates/lsg-component.hbs b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
@@ -1,6 +1,6 @@
 <section class="dds-component" id="{{componentName}}">
   <h2 class="dds-component__name">{{options.name}}</h2>
   <div class="dds-component__description">
-    {{{description}}}
+{{{description}}}
   </div>
 </section>
diff --git a/packages/pv-stylemark/tasks/templates/lsg.hbs b/packages/pv-stylemark/tasks/templates/lsg.hbs
@@ -25,7 +25,7 @@
     <main class="dds-page__main">
       {{#each lsgData}}
         {{#each categoryItems}}
-          {{> lsg-component }}
+{{> lsg-component }}
         {{/each}}
       {{/each}}
     </main>

diff --git a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
@@ -49,6 +49,19 @@
       margin: 0 0 16px;
     }
 
+    a {
+      color: $dds-color__black-070;
+      text-underline-offset: 2px;
+      transition: color 0.3s ease-in-out, text-underline-offset 0.3s ease-in-out;
+
+      @media (hover: hover) {
+        &:hover {
+          color: $dds-color__black-090;
+          text-underline-offset: 3px;
+        }
+      }
+    }
+
     dds-example {
       margin: 24px 0 40px;
 
@@ -62,8 +75,16 @@
     }
 
     code {
-      background: $dds-color__black-010;
+      display: inline-block;
+      padding: 2px 8px;
+      margin-bottom: 4px;
+      background: $dds-color__black-020;
+      color: $dds-color__black-070;
       border-radius: 4px;
     }
+
+    pre code {
+      background: $dds-color__black-010;
+    }
   }
 }
diff --git a/packages/pv-stylemark/ui/components/dds-example/dds-example.scss b/packages/pv-stylemark/ui/components/dds-example/dds-example.scss
@@ -2,10 +2,8 @@ dds-example {
   display: flex;
   flex-direction: column;
   gap: 8px;
-}
 
-.dds-example {
-  &__example-link {
+  .dds-example__example-link {
     display: inline-block;
     margin-left: auto;
     color: inherit;
@@ -21,10 +19,13 @@ dds-example {
     @media (hover: hover) {
       &:hover {
         background: $dds-color__black-080;
+        color: $dds-color__white;
       }
     }
   }
+}
 
+.dds-example {
   &__example-box {
     height: 50vh;
     border: 1px solid #d0d0d0;