fix: update typo styles for nested links in alerts

haiilo · Oct 24, 2023 · 4ca67d9 · 4ca67d9
1 parent 7550312
commit 4ca67d9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss
@@ -32,6 +32,11 @@
   :host([color='#{$theme}']) {
     background-color: cat-token('color.theme.#{$theme}.bg');
     color: cat-token('color.theme.#{$theme}.fill');
+    // adjust nested links
+    --cat-primary-text: cat-token('color.theme.#{$theme}.fill', $wrap: false);
+    --cat-primary-text-hover: cat-token('color.theme.#{$theme}.fill-hover', $wrap: false);
+    --cat-primary-text-active: cat-token('color.theme.#{$theme}.fill-active', $wrap: false);
+    --cat-link-decoration: underline;
   }
 }
 

diff --git a/core/src/index.html b/core/src/index.html
@@ -248,21 +248,21 @@ <h2>Alert</h2>
               <cat-alert tabindex="3">
                 <p>
                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                  labore et dolore magna aliquyam erat, sed diam voluptua.
+                  labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
                 </p>
               </cat-alert>
               <h3>Color</h3>
               <cat-alert color="secondary">
-                <p>Lorem ipsum dolor sit amet.</p>
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
               </cat-alert>
               <cat-alert color="success">
-                <p>Lorem ipsum dolor sit amet.</p>
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
               </cat-alert>
               <cat-alert color="warning">
-                <p>Lorem ipsum dolor sit amet.</p>
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
               </cat-alert>
               <cat-alert color="danger">
-                <p>Lorem ipsum dolor sit amet.</p>
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
               </cat-alert>
               <h3>Variations</h3>
               <cat-alert color="primary" no-icon>
@@ -1323,6 +1323,30 @@ <h5>Key Benefits Include:</h5>
               <li>Higher customer satisfaction</li>
             </ul>
 
+            <dl>
+              <dt>Employee Engagement</dt>
+              <dd>
+                Refers to the enthusiasm and involvement an employee has towards their work and the organization's
+                mission.
+              </dd>
+              <dt>Benefits of High Engagement</dt>
+              <dd>
+                <ul>
+                  <li>Increased productivity and performance</li>
+                  <li>Higher retention rates</li>
+                  <li>Improved workplace morale</li>
+                  <li>Enhanced company reputation</li>
+                  <li>Higher customer satisfaction</li>
+                </ul>
+              </dd>
+              <dt>Strategies to Enhance Engagement</dt>
+              <dd>
+                Building a strong engagement strategy requires a deep understanding of the employees' needs,
+                aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
+                pivotal roles.
+              </dd>
+            </dl>
+
             <h4>Strategies to Enhance Engagement</h4>
             <p>
               Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,

diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss
@@ -105,30 +105,19 @@ ul {
   padding-left: 2rem;
 }
 
-ol,
-ul,
-dl {
-  ol,
-  ul,
-  dl {
-    margin-bottom: 0;
-  }
-}
-
 nav ol,
 nav ul,
 ol.cat-plain,
 ul.cat-plain {
   list-style: none;
-  margin: 0;
   padding: 0;
 }
 
 dt {
   font-weight: 600;
 }
 
-dd {
+dd:not(:last-child) {
   margin-bottom: 0.5rem;
   margin-left: 0;
 }
@@ -241,10 +230,20 @@ code {
     margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1));
   }
 
-  :where(p, ol, ul, dl, blockquote, figure, pre, cat-alert, cat-card) {
+  :where(p, ol, ul, dl, blockquote, figure, pre, table, cat-alert, cat-card):not(:last-child) {
     margin-bottom: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1));
   }
 
+  ol,
+  ul,
+  dl {
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0;
+    }
+  }
+
   hr,
   .cat-hr {
     margin: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1)) 0;

diff --git a/core/src/styles/utils/_color.scss b/core/src/styles/utils/_color.scss
@@ -4,6 +4,11 @@
   .cat-bg-#{$name} {
     background-color: cat-token('color.theme.#{$name}.bg') !important;
     color: cat-token('color.theme.#{$name}.fill') !important;
+    // adjust nested links
+    --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
+    --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
+    --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+    --cat-link-decoration: underline;
   }
 
   .cat-bg-#{$name}-hover {
@@ -14,6 +19,11 @@
     &:hover {
       background-color: cat-token('color.theme.#{$name}.bgHover') !important;
       color: cat-token('color.theme.#{$name}.fillHover') !important;
+      // adjust nested links
+      --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
+      --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
+      --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+      --cat-link-decoration: underline;
     }
   }
 
@@ -55,7 +65,7 @@
 }
 
 .cat-bg-muted {
-  color: cat-token('color.ui.font.muted') !important;
+  background-color: cat-token('color.ui.background.muted') !important;
 }
 
 .cat-text-reset {