DOCS-1384 - Add admonition for Training and Certification

docs/contributing/style-guide.md

@@ -176,7 +176,11 @@ This action is dangerous and could result in data loss.
 :::
 
 :::sumo Best Practice
-Highlight specific info, best practices, links, [training links](https://www.sumologic.com/learn/training/), and other information from Sumo specialists. You can change the title based on the content.
+Highlight Sumo-specific info, best practices, links, and other information from Sumo specialists. You can change the title based on the content.
+:::
+
+:::training
+Links to training courses, certification info, and micro lessons.
 :::
 
 ```
@@ -205,7 +209,11 @@ This action is dangerous and could result in data loss.
 :::
 
 :::sumo Best Practice
-Highlight specific info, best practices, links, [training links](https://www.sumologic.com/learn/training/), and other information from Sumo specialists. You can change the title based on the content.
+Highlight Sumo-specific info, best practices, links, and other information from Sumo specialists. You can change the title based on the content.
+:::
+
+:::training
+Links to training courses, certification info, and micro lessons.
 :::
 
 </TabItem>

docusaurus.config.js

@@ -104,6 +104,7 @@ module.exports = {
               'tip',
               'warning',
               'important',
+              'training',
             ],
           },
         },

src/css/sumo.scss

@@ -797,6 +797,48 @@ html[data-theme='light'] .theme-admonition-sumo {
   }
 }
 
+// TRAINING
+html[data-theme='dark'] .theme-admonition-training {
+  background-color: rgba(112, 0, 162, 0.1);
+  --ifm-alert-border-color: #7000a2;
+  border-left: 6px solid #7000a2;
+  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+  --ifm-alert-color: #e3e3e3;
+  --ifm-alert-foreground-color: #e3e3e3; /* ← ADD THIS */
+  .admonition-icon {
+    background-color: #7000a2;
+    padding: 5px 5px 0px 5px;
+  }
+  a {
+    color: #c440ff;
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+
+html[data-theme='light'] .theme-admonition-training {
+  background-color: rgba(112, 0, 162, 0.05);
+  --ifm-alert-border-color: #7000a2;
+  border-left: 6px solid #7000a2;
+  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+  --ifm-alert-color: var(--ifm-font-color-base);
+  --ifm-alert-foreground-color: #7000a2;
+  color: var(--ifm-font-color-base);
+  .admonition-icon {
+    --ifm-alert-foreground-color: #7000a2 !important;
+  }
+  a {
+    color: #7000a2;
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
 // IMPORTANT
 html[data-theme='light'] .alert--info {
   --ifm-alert-background-color: rgba(0, 139, 178, 0.05);

src/theme/Admonition/index.js

@@ -59,6 +59,16 @@ function SumoIcon() {
     <img src={useBaseUrl('img/reuse/sumo-square.png')} width="25"/> 
   )
 }
+function TrainingIcon() {
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zM5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z"
+      />
+    </svg>
+  );
+}
 // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 const AdmonitionConfigs = {
   sumo: {
@@ -72,6 +82,17 @@ const AdmonitionConfigs = {
       </Translate>
     ),
   },
+  training: {
+    infimaClassName: 'training',
+    iconComponent: TrainingIcon,
+    label: (
+      <Translate
+        id="theme.admonition.training"
+        description="The default label used for the Training admonition (:::training)">
+        training
+      </Translate>
+    ),
+  },
   note: {
     infimaClassName: 'secondary',
     iconComponent: NoteIcon,