[TASK] New styling for version directives

Author: linawolf

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

@@ -33,30 +33,7 @@
     //    margin: 0;
     //}
 
-    /**
-     * Version Added, Changed, Deprecated
-     */
-    div {
-        .deprecated,
-        .versionadded,
-        .versionchanged {
-            border-left: 2px solid hsl(26.5, 84.3%, 85%);
-            padding-left: 1em;
-        }
-    }
 
-    /**
-     * Version Modified
-     */
-    .versionmodified {
-        background-color: hsl(26.5, 84.3%, 95%);
-        border-radius: 3px;
-        border: 1px solid hsl(26.5, 84.3%, 85%);
-        color: $code-color-typoscript;
-        font-style: italic;
-        margin: 0 3px 0 0;
-        padding: 0 2px;
-    }
 
     /**
      * Images and objects

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

@@ -0,0 +1,33 @@
+@mixin version-changed($border-color: $info, $icon-color: darken($border-color, 15%), $background-color: lighten($border-color, 40%), $text-color: color-contrast($background-color)) {
+    border-left: 5px solid $border-color;
+    padding-left: 1em;
+    .versionmodified {
+        .versionicon {
+            color: $icon-color;
+            padding-right: .5em;
+        }
+        color: $text-color;
+        font-weight: bold;
+        margin-bottom: 0.5em;
+        padding: 0 2px;
+    }
+}
+/**
+ * Version Added, Changed, Deprecated
+ */
+.deprecated {
+    @include version-changed($gray-700);
+}
+.versionadded {
+    @include version-changed($success);
+}
+.versionchanged {
+    @include version-changed($info);
+}
+
+.admonition {
+    .deprecated, .versionadded, .versionchanged {
+        border: none;
+        padding: 0;
+    }
+}

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

@@ -44,6 +44,7 @@
 @import 'component_confval.scss';
 @import 'component_fieldlist';
 @import 'component_textroles';
+@import 'component_versionchanged';
 
 // misc
 @import 'utilities';

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -24625,12 +24625,6 @@ a.toc-title-project:hover {
   /**
    * Lists
    */
-  /**
-   * Version Added, Changed, Deprecated
-   */
-  /**
-   * Version Modified
-   */
   /**
    * Images and objects
    */
@@ -24668,21 +24662,6 @@ a.toc-title-project:hover {
     margin: 0;
   }
 }
-.rst-content div .deprecated,
-.rst-content div .versionadded,
-.rst-content div .versionchanged {
-  border-left: 2px solid hsl(26.5, 84.3%, 85%);
-  padding-left: 1em;
-}
-.rst-content .versionmodified {
-  background-color: hsl(26.5, 84.3%, 95%);
-  border-radius: 3px;
-  border: 1px solid hsl(26.5, 84.3%, 85%);
-  color: hsl(12, 100%, 20%);
-  font-style: italic;
-  margin: 0 3px 0 0;
-  padding: 0 2px;
-}
 .rst-content img,
 .rst-content object {
   display: inline-block;
@@ -25086,6 +25065,59 @@ kbd {
   border: 1px solid #319fc0;
 }
 
+/**
+ * Version Added, Changed, Deprecated
+ */
+.deprecated {
+  border-left: 5px solid gray;
+  padding-left: 1em;
+}
+.deprecated .versionmodified {
+  color: #000000;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  padding: 0 2px;
+}
+.deprecated .versionmodified .versionicon {
+  color: #5a5a5a;
+  padding-right: 0.5em;
+}
+
+.versionadded {
+  border-left: 5px solid #5cb85c;
+  padding-left: 1em;
+}
+.versionadded .versionmodified {
+  color: #000000;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  padding: 0 2px;
+}
+.versionadded .versionmodified .versionicon {
+  color: #3d8b3d;
+  padding-right: 0.5em;
+}
+
+.versionchanged {
+  border-left: 5px solid #319fc0;
+  padding-left: 1em;
+}
+.versionchanged .versionmodified {
+  color: #000000;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  padding: 0 2px;
+}
+.versionchanged .versionmodified .versionicon {
+  color: #216d83;
+  padding-right: 0.5em;
+}
+
+.admonition .deprecated, .admonition .versionadded, .admonition .versionchanged {
+  border: none;
+  padding: 0;
+}
+
 .no-focus {
   outline: none !important;
 }

packages/typo3-docs-theme/resources/template/body/version-change.html.twig

@@ -0,0 +1,16 @@
+<div class="versionchange {{ node.type }}">
+    <p class="versionmodified">
+        <span class="versionicon">
+        {%- if node.type=="deprecated" -%}
+            <i class="fa-solid fa-ban"></i>
+        {%- elseif node.type=="versionadded" -%}
+            <i class="fa-solid fa-rocket"></i>
+        {%- elseif node.type=="versionchanged" -%}
+            <i class="fa-solid fa-arrows-rotate"></i>
+        {%- endif -%}
+        </span>
+        {{ node.versionLabel }}</p>
+    <article>
+        {{ renderNode(node.value) }}
+    </article>
+</div>