diff --git a/packages/pv-stylemark/tasks/templates/lsg-component.hbs b/packages/pv-stylemark/tasks/templates/lsg-component.hbs index 846515d..9f82ad4 100644 --- a/packages/pv-stylemark/tasks/templates/lsg-component.hbs +++ b/packages/pv-stylemark/tasks/templates/lsg-component.hbs @@ -1,6 +1,6 @@

{{options.name}}

- {{{description}}} +{{{description}}}
diff --git a/packages/pv-stylemark/tasks/templates/lsg.hbs b/packages/pv-stylemark/tasks/templates/lsg.hbs index 4c76cb5..6cc82b8 100644 --- a/packages/pv-stylemark/tasks/templates/lsg.hbs +++ b/packages/pv-stylemark/tasks/templates/lsg.hbs @@ -25,7 +25,7 @@
{{#each lsgData}} {{#each categoryItems}} - {{> lsg-component }} +{{> lsg-component }} {{/each}} {{/each}}
diff --git a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss index 1f87f69..ea8573b 100644 --- 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 index 2d848bf..ad0be8d 100644 --- 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;