[TASK] Button styles for card footers (#671)

Author: linawolf

Documentation-rendertest/Cards/Index.rst

@@ -157,6 +157,55 @@ Cards with complex content, very responsive
 
         ..  card-footer:: :ref:`Read more <cards>`
 
+Cards with complex footer
+=========================
+
+..  card-grid::
+    :columns: 1
+    :columns-md: 3
+    :gap: 4
+    :card-height: 100
+
+    ..  card:: `Minor upgrades <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__
+
+
+        Minor updates (for example 12.4.1 to 12.4.2)
+        contain bugfixes and/or security updates.
+        This chapter details how updates are installed and highlights what tasks need to
+        be carried out before and after the core is updated.
+
+        ..  card-footer:: `13-dev <https://docs.typo3.org/m/typo3/guide-installation/main/en-us/Minor/Index.html>`__ `12.4 <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__ `11.5 <https://docs.typo3.org/m/typo3/guide-installation/11.5/en-us/Minor/Index.html>`__
+            :button-style: btn btn-secondary
+
+    ..  card:: `Minor upgrades <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__
+
+        Minor updates (for example 12.4.1 to 12.4.2)
+        contain bugfixes and/or security updates.
+        This chapter details how updates are installed and highlights what tasks need to
+        be carried out before and after the core is updated.
+
+        ..  card-footer::
+            :button-styles: default
+
+            :ref:`13-dev <t3upgrade/dev:minor>`
+            :ref:`12.4 <t3upgrade/stable:minor>`
+            :ref:`11.5 <t3upgrade/oldstable:minor>`
+
+    ..  card:: `Minor upgrades <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__
+
+        Minor updates (for example 12.4.1 to 12.4.2)
+        contain bugfixes and/or security updates.
+        This chapter details how updates are installed and highlights what tasks need to
+        be carried out before and after the core is updated.
+
+        ..  card-footer::
+            :button-styles: secondary
+
+            `13-dev <https://docs.typo3.org/m/typo3/guide-installation/main/en-us/Minor/Index.html>`__
+            `12.4 <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__
+            `11.5 <https://docs.typo3.org/m/typo3/guide-installation/11.5/en-us/Minor/Index.html>`__
+
+
 Card group
 ==========
 

packages/typo3-docs-theme/assets/sass/_text.scss

@@ -5,6 +5,11 @@ body {
     --bs-emphasis-color:  #{$gray-900};
 }
 
+root {
+    --frame-link-color: #{$gray-800};
+    --frame-link-hover-color: #{$black};
+}
+
 a {
     color:inherit;
     text-underline-offset: 25%;
@@ -28,9 +33,9 @@ article {
     a:not([class*="btn"]) {
         @extend .text-break;
         text-decoration: underline;
-        color: $gray-800;
+        color: var(--frame-link-color);
         &:hover {
-            color: $black;
+            color: var(--frame-link-hover-color);
             text-decoration-thickness: 2px;
         }
     }

packages/typo3-docs-theme/assets/sass/components/_button.scss

@@ -30,3 +30,22 @@
         @include button-variant($white, $white, $secondary, $white, $secondary, $secondary);
     }
 }
+
+.button-style a {
+    @extend .btn;
+    text-decoration: none!important;
+}
+
+.button-style-primary, .button-style-secondary {
+    --frame-link-color:#{$white};
+    a {
+        @extend .btn-secondary;
+    }
+}
+
+.button-style-default, .button-style-light {
+    --frame-link-color: #{$secondary};
+    a {
+        @extend .btn-default;
+    }
+}

packages/typo3-docs-theme/assets/sass/components/_card.scss

@@ -4,20 +4,30 @@
 .card-group {
     --bs-gutter-x: 1.5rem;
     --bs-gutter-y: 1.5rem;
+
     .card {
-        box-shadow: 2px 1px 6px rgba(32,33,36,.28);
-	.card-img, .card-img-top {
-	    border-top-left-radius: 0;
-	    border-top-right-radius: 0;
-	}
-	.card-img:first-child, .card-img-top:first-child {
-	    border-top-left-radius: var(--bs-card-inner-border-radius);
-	    border-top-right-radius: var(--bs-card-inner-border-radius);
-	}
-	.card-body {
-                *:last-child {
-                    margin-bottom: 0;
-                }
+        box-shadow: 2px 1px 6px rgba(32, 33, 36, .28);
+
+        .card-img, .card-img-top {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .card-img:first-child, .card-img-top:first-child {
+            border-top-left-radius: var(--bs-card-inner-border-radius);
+            border-top-right-radius: var(--bs-card-inner-border-radius);
+        }
+
+        .card-body {
+            *:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .card-footer {
+        *:last-child {
+            margin-bottom: 0;
         }
     }
 }