feat: DC-4267 Add new badges + yellow color to theming (#7099)

* Add new badges + yellow color to theming

* fix duplicate

Author: carlagn

src/css/custom.css

@@ -1152,8 +1152,61 @@ body:has(.navbar-sidebar--show) > div:first-of-type {
 .mantine-Stack-root {
   gap: 0;
 }
+.beta-badge, .feature-badge, .new-badge, .preview-badge, .early-access-badge {
+  position: relative;
+}
+.beta-badge::after {
+  position: absolute;
+  right: 0px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: var(--yellow-800);
+  background: var(--yellow-200);
+  line-height: 15px;
+  border-radius: 5px;
+  padding: 2px 5px;
+  text-transform: capitalize;
+  content: "Beta";
+  top: 50%;
+  transform: translateY(-50%);
+}
 
-.preview-badge ::after {
+.feature-badge::after {
+  position: absolute;
+  right: 0px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: var(--surface-brand-darkest-indigo);
+  background: var(--surface-brand-light-indigo);
+  border-radius: 5px;
+  padding: 2px 5px;
+  text-transform: capitalize;
+  content: "Feature";
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 15px;
+}
+
+.new-badge::after {
+  position: absolute;
+  right: 0px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: var(--surface-brand-darkest);
+  background: var(--surface-brand-light);
+  border-radius: 5px;
+  padding: 2px 5px;
+  text-transform: capitalize;
+  line-height: 15px;
+  content: "New";
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.preview-badge::after {
   position: absolute;
   right: 0px;
   font-size: 12px;
@@ -1164,10 +1217,13 @@ body:has(.navbar-sidebar--show) > div:first-of-type {
   border-radius: 5px;
   padding: 2px 5px;
   text-transform: capitalize;
+  line-height: 15px;
   content: "Preview";
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.early-access-badge ::after {
+.early-access-badge::after {
   position: absolute;
   right: 0px;
   font-size: 12px;
@@ -1176,9 +1232,12 @@ body:has(.navbar-sidebar--show) > div:first-of-type {
   color: var(--badge-color);
   background: var(--badge-bg-color);
   border-radius: 5px;
+  line-height: 15px;
   padding: 2px 5px;
   text-transform: capitalize;
   content: "Early Access";
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .table-of-contents__link--active.table-of-contents__link--active:hover code {

src/css/theming.css

@@ -67,6 +67,9 @@
   --surface-brand-grey: #f7fafc;
   --surface-brand-grey-strong: #edf2f7;
   --surface-brand-light: #d9f9f6;
+  --surface-brand-light-indigo: #EBF4FF;
+  --surface-brand-darkest: #154F47;
+  --surface-brand-darkest-indigo: #434190;
   --primary-font-color: var(--gray-800);
   --surface-primary: #ffffff;
   --disabled-font-color: #CBD5E0;
@@ -177,6 +180,16 @@
   --teal-700: #187367;
   --teal-800: #154f47;
   --teal-900: #154f47;
+  
+  --yellow-100: #FFFFF0;
+  --yellow-200: #FEFCBF;
+  --yellow-300: #FAF089;
+  --yellow-400: #F6E05E;
+  --yellow-500: #ECC94B;
+  --yellow-600: #D69E2E;
+  --yellow-700: #B7791F;
+  --yellow-800: #975A16;
+  --yellow-900: #744210;
 
   @media (max-width: 996px) {
     --ifm-menu-link-sublist-icon: url("/icons/chevron-up-solid.svg");
@@ -232,6 +245,9 @@ html[data-theme="dark"] {
   --surface-brand-grey: #161d2b;
   --surface-brand-grey-strong: #2d3748;
   --surface-brand-light: #0d3a38;
+  --surface-brand-light-indigo: #282B6B;
+  --surface-brand-darkest: #B7F4EE;
+  --surface-brand-darkest-indigo: #C3DAFE;
   --secondary-font-color: rgb(203, 213, 224);
   --tertiary-font-color: #a0aec0;
   --ifm-dropdown-background-color: var(--gray-1000);
@@ -318,6 +334,9 @@ html[data-theme="dark"] {
     --surface-brand-grey: #f7fafc;
     --surface-brand-grey-strong: #edf2f7;
     --surface-brand-light: #d9f9f6;
+    --surface-brand-light-indigo: #EBF4FF;
+    --surface-brand-darkest: #154F47;
+    --surface-brand-darkest-indigo: #434190;
     --ifm-color-primary-darkest: #205d3b;
     --ifm-color-primary-light: #33925d;
     --ifm-color-primary-lighter: #359962;
@@ -354,6 +373,9 @@ html[data-theme="dark"] {
     --surface-brand-grey: #f7fafc;
     --surface-brand-grey-strong: #edf2f7;
     --surface-brand-light: #d9f9f6;
+    --surface-brand-light-indigo: #EBF4FF;
+    --surface-brand-darkest: #154F47;
+    --surface-brand-darkest-indigo: #434190;
     --secondary-font-color: #4a5568;
     --tertiary-font-color: #718096;
     --ifm-dropdown-background-color: #fff;
@@ -464,6 +486,16 @@ html[data-theme="dark"] {
     --teal-700: #187367;
     --teal-800: #154f47;
     --teal-900: #154f47;
+
+    --yellow-100: #FFFFF0;
+    --yellow-200: #FEFCBF;
+    --yellow-300: #FAF089;
+    --yellow-400: #F6E05E;
+    --yellow-500: #ECC94B;
+    --yellow-600: #D69E2E;
+    --yellow-700: #B7791F;
+    --yellow-800: #975A16;
+    --yellow-900: #744210;
   }
 
   :root[data-theme="dark"] {
@@ -505,6 +537,9 @@ html[data-theme="dark"] {
     --surface-brand-grey: #161d2b;
     --surface-brand-grey-strong: #2d3748;
     --surface-brand-light: #0d3a38;
+    --surface-brand-light-indigo: #282B6B;
+    --surface-brand-darkest: #B7F4EE;
+    --surface-brand-darkest-indigo: #C3DAFE;
     --secondary-font-color: rgb(203, 213, 224);
     --tertiary-font-color: #a0aec0;
     --ifm-dropdown-background-color: var(--gray-1000);