diff --git a/docs/product/base/colors-new.html b/docs/product/base/colors-new.html
index 114bea7d4c..384fe9105a 100755
--- a/docs/product/base/colors-new.html
+++ b/docs/product/base/colors-new.html
@@ -146,12 +146,6 @@ <h3>{{ set.name | capitalize }}</h3>
 <p>…</p>
 <p class="fc-dark">…</p>
 {% endhighlight %}
-        <div class="stacks-preview--example my8 fs-body2">
-            <p class="fc-light"><strong>Color:</strong> Light <code class="stacks-code">black-500</code></p>
-            <p class="fc-medium"><strong>Color:</strong> Medium <code class="stacks-code">black-700</code></p>
-            <p><strong>Color:</strong> Default <code class="stacks-code">black-800</code></p>
-            <p class="fc-dark"><strong>Color:</strong> Dark <code class="stacks-code">black-900</code></p>
-        </div>
     </div>
 
     {% header "h3", "Danger and error" %}
@@ -166,24 +160,19 @@ <h3>{{ set.name | capitalize }}</h3>
             </thead>
             <tbody>
                 <tr class="ff-mono">
-                    <td class="fc-danger">
+                    <td class="fc-new-danger">
                         <div class="d-flex g12">
-                            <div class="flex--item ws-nowrap">.fc-danger</div>
-                            <div class="flex--item ws-nowrap">.fc-error</div>
+                            <div class="ws-nowrap">.fc-new-danger</div>
+                            <div class="ws-nowrap">.fc-new-error</div>
                         </div>
                     </td>
                     <td class="p8">
                         <div class="d-flex g4">
-                            <div class="flex--item bg-danger p8 fc-white bar-sm ws-nowrap">.bg-danger</div>
-                            <div class="flex--item bg-error p8 fc-white bar-sm ws-nowrap">.bg-error</div>
-                        </div>
-                    </td>
-                    <td class="p8">
-                        <div class="d-flex g4">
-                            <div class="flex--item ba bc-danger p8 bar-sm fc-danger ws-nowrap">.bc-danger</div>
-                            <div class="flex--item ba bc-error p8 bar-sm fc-error ws-nowrap">.bc-error</div>
+                            <div class="bg-new-danger p8 fc-white bar-sm ws-nowrap">.bg-new-danger</div>
+                            <div class="bg-new-error p8 fc-white bar-sm ws-nowrap">.bg-new-error</div>
                         </div>
                     </td>
+                    <!-- TODO mention deprecation of border-color alias classes (which we documented in legacy colors but didn't generate 😬) -->
                 </tr>
             </tbody>
         </table>
@@ -201,12 +190,12 @@ <h3>{{ set.name | capitalize }}</h3>
             </thead>
             <tbody>
                 <tr class="ff-mono">
-                    <td class="fc-success">.fc-success</td>
+                    <td class="fc-new-success">.fc-new-success</td>
                     <td class="p8">
-                        <div class="bg-success p8 fc-white bar-sm d-inline-block">.bg-success</div>
+                        <div class="bg-new-success p8 fc-white bar-sm d-inline-block">.bg-new-success</div>
                     </td>
                     <td class="p8">
-                        <div class="ba bc-success p8 bar-sm d-inline-block fc-success">.bc-success</div>
+                        <div class="ba bc-new-success p8 bar-sm d-inline-block fc-new-success">.bc-new-success</div>
                     </td>
                 </tr>
             </tbody>
@@ -225,12 +214,12 @@ <h3>{{ set.name | capitalize }}</h3>
             </thead>
             <tbody>
                 <tr class="ff-mono">
-                    <td class="fc-warning">.fc-warning</td>
+                    <td class="fc-new-warning">.fc-new-warning</td>
                     <td class="p8">
-                        <div class="bg-warning p8 fc-white bar-sm d-inline-block">.bg-warning</div>
+                        <div class="bg-new-warning p8 fc-white bar-sm d-inline-block">.bg-new-warning</div>
                     </td>
                     <td class="p8">
-                        <div class="ba bc-warning p8 bar-sm d-inline-block fc-warning">.bc-warning</div>
+                        <div class="ba bc-new-warning p8 bar-sm d-inline-block fc-new-warning">.bc-new-warning</div>
                     </td>
                 </tr>
             </tbody>
diff --git a/lib/exports/colors-new/__snapshots__/color-mixins.less.test.ts.snap b/lib/exports/colors-new/__snapshots__/color-mixins.less.test.ts.snap
index 5035fda85a..38638dca08 100644
--- a/lib/exports/colors-new/__snapshots__/color-mixins.less.test.ts.snap
+++ b/lib/exports/colors-new/__snapshots__/color-mixins.less.test.ts.snap
@@ -246,9 +246,6 @@ body .themed {
     --bs-new-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
     --bs-new-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
     --bs-new-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
-    --fc-new-light: var(--black-new-400);
-    --fc-new-medium: var(--black-new-500);
-    --fc-new-dark: var(--black-new-600);
     --focus-new: hsla(206, 100%, 40%, 0.9);
     --focus-new-success: hsla(140, 40%, 75%, 0.4);
     --focus-new-warning: hsla(47, 79%, 58%, 0.4);
@@ -267,66 +264,6 @@ body .themed {
     --highlight-new-symbol: hsl(306, 43%, 35%);
     --highlight-new-variable: hsl(80, 80.5%, 26.5%);
     --scrollbar-new: hsla(0, 0%, 0%, 0.2);
-    --theme-body-font-color: var(--black-800);
-    --theme-background-color: var(--white);
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-350);
-    --theme-link-color-visited: var(--theme-secondary-700);
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-500);
-    --theme-button-hover-background-color: var(--theme-secondary-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-150);
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-    --theme-button-primary-active-background-color: var(--theme-secondary-700);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-    --theme-button-primary-number-color: var(--theme-secondary-900);
-    --theme-button-filled-color: var(--theme-secondary-700);
-    --theme-button-filled-background-color: var(--theme-secondary-050);
-    --theme-button-filled-border-color: var(--theme-secondary-350);
-    --theme-button-filled-hover-color: var(--theme-secondary-800);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-    --theme-button-filled-active-background-color: var(--theme-secondary-150);
-    --theme-button-filled-active-border-color: var(--theme-secondary-350);
-    --theme-button-filled-selected-color: var(--theme-secondary-900);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-    --theme-button-outlined-border-color: var(--theme-secondary-300);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-    --theme-tag-color: var(--theme-secondary-800);
-    --theme-tag-background-color: var(--theme-secondary-075);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-900);
-    --theme-tag-hover-background-color: var(--theme-secondary-100);
-    --theme-tag-hover-border-color: transparent;
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
-    --theme-topbar-background-color: var(--white);
-    --theme-topbar-search-color: var(--black-700);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-200);
-    --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-    --theme-topbar-select-color: var(--black-700);
-    --theme-topbar-select-background: var(--black-075);
-    --theme-topbar-item-color: var(--black-600);
-    --theme-topbar-item-color-hover: var(--black-800);
-    --theme-topbar-item-background-hover: var(--black-075);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary-color);
-    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-    --theme-topbar-bottom-border: 1px solid var(--black-100);
-    --theme-post-title-color: var(--theme-link-color);
-    --theme-post-title-color-hover: var(--theme-link-color-hover);
-    --theme-post-title-color-visited: var(--theme-link-color-visited);
-    --theme-post-title-font-family: var(--theme-body-font-family);
-    --theme-post-body-font-family: var(--theme-body-font-family);
     --theme-primary-new: var(--theme-primary-new-custom, var(--orange-new-400));
     --theme-primary-new-100: var(--theme-primary-new-custom-100, var(--orange-new-100));
     --theme-primary-new-200: var(--theme-primary-new-custom-200, var(--orange-new-200));
@@ -342,19 +279,19 @@ body .themed {
     --theme-secondary-new-500: var(--theme-secondary-new-custom-500, var(--blue-new-500));
     --theme-secondary-new-600: var(--theme-secondary-new-custom-600, var(--blue-new-600));
     --theme-primary-new-custom: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), var(--theme-base-primary-color-new-l));
-    --theme-primary-new-custom-100: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
-    --theme-primary-new-custom-200: rgb(calc(122.4 + var(--theme-base-primary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-b) * 0.52));
+    --theme-primary-new-custom-100: rgb(calc(234.6 + var(--theme-base-primary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-b) * 0.08));
+    --theme-primary-new-custom-200: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
     --theme-primary-new-custom-300: rgb(calc(89.25 + var(--theme-base-primary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-b) * 0.65));
     --theme-primary-new-custom-400: var(--theme-primary-new-custom);
-    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 5%));
-    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 26%));
     --theme-secondary-new-custom: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), var(--theme-base-secondary-color-new-l));
-    --theme-secondary-new-custom-100: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
-    --theme-secondary-new-custom-200: rgb(calc(122.4 + var(--theme-base-secondary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-b) * 0.52));
+    --theme-secondary-new-custom-100: rgb(calc(234.6 + var(--theme-base-secondary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-b) * 0.08));
+    --theme-secondary-new-custom-200: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
     --theme-secondary-new-custom-300: rgb(calc(89.25 + var(--theme-base-secondary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-b) * 0.65));
     --theme-secondary-new-custom-400: var(--theme-secondary-new-custom);
-    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 5%));
-    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 26%));
     color: var(--theme-body-font-color-new, var(--black-new-600));
 }
 "
@@ -369,12 +306,12 @@ exports[`color-mixins > theming > create-custom-theme-hsl-rgb-variables 1`] = `
     --theme-base-primary-color-new-g: 17;
     --theme-base-primary-color-new-b: 0;
     --theme-primary-new-custom: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), var(--theme-base-primary-color-new-l));
-    --theme-primary-new-custom-100: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
-    --theme-primary-new-custom-200: rgb(calc(122.4 + var(--theme-base-primary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-b) * 0.52));
+    --theme-primary-new-custom-100: rgb(calc(234.6 + var(--theme-base-primary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-b) * 0.08));
+    --theme-primary-new-custom-200: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
     --theme-primary-new-custom-300: rgb(calc(89.25 + var(--theme-base-primary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-b) * 0.65));
     --theme-primary-new-custom-400: var(--theme-primary-new-custom);
-    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 5%));
-    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 26%));
 }
 
 create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
@@ -385,12 +322,12 @@ create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
     --theme-base-secondary-color-new-g: 255;
     --theme-base-secondary-color-new-b: 83;
     --theme-secondary-new-custom: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), var(--theme-base-secondary-color-new-l));
-    --theme-secondary-new-custom-100: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
-    --theme-secondary-new-custom-200: rgb(calc(122.4 + var(--theme-base-secondary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-b) * 0.52));
+    --theme-secondary-new-custom-100: rgb(calc(234.6 + var(--theme-base-secondary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-b) * 0.08));
+    --theme-secondary-new-custom-200: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
     --theme-secondary-new-custom-300: rgb(calc(89.25 + var(--theme-base-secondary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-b) * 0.65));
     --theme-secondary-new-custom-400: var(--theme-secondary-new-custom);
-    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 5%));
-    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 26%));
 }
 
 create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
@@ -401,12 +338,12 @@ create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
     --theme-dark-primary-color-new-g: 9;
     --theme-dark-primary-color-new-b: 29;
     --theme-dark-primary-new-custom: hsl(var(--theme-dark-primary-color-new-h), var(--theme-dark-primary-color-new-s), var(--theme-dark-primary-color-new-l));
-    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 11%), 100%));
-    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 7%), 100%));
-    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 5%), 100%));
+    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 55%), 100%));
+    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 35%), 100%));
+    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 20%), 100%));
     --theme-dark-primary-new-custom-400: var(--theme-dark-primary-new-custom);
     --theme-dark-primary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-primary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-b) * 0.64));
-    --theme-dark-primary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-primary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-b) * 0.49));
+    --theme-dark-primary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-primary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-b) * 0.25));
 }
 
 create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
@@ -417,12 +354,12 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
     --theme-dark-secondary-color-new-g: 40;
     --theme-dark-secondary-color-new-b: 31;
     --theme-dark-secondary-new-custom: hsl(var(--theme-dark-secondary-color-new-h), var(--theme-dark-secondary-color-new-s), var(--theme-dark-secondary-color-new-l));
-    --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 11%), 100%));
-    --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 7%), 100%));
-    --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 5%), 100%));
+    --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 55%), 100%));
+    --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 35%), 100%));
+    --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 20%), 100%));
     --theme-dark-secondary-new-custom-400: var(--theme-dark-secondary-new-custom);
     --theme-dark-secondary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-secondary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-b) * 0.64));
-    --theme-dark-secondary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-secondary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-b) * 0.49));
+    --theme-dark-secondary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-secondary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-b) * 0.25));
 }
 "
 `;
@@ -430,42 +367,42 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
 exports[`color-mixins > theming > create-custom-theme-variables 1`] = `
 "create-custom-theme-variables(primary, base) {
     --theme-primary-new-custom: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), var(--theme-base-primary-color-new-l));
-    --theme-primary-new-custom-100: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
-    --theme-primary-new-custom-200: rgb(calc(122.4 + var(--theme-base-primary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-b) * 0.52));
+    --theme-primary-new-custom-100: rgb(calc(234.6 + var(--theme-base-primary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-b) * 0.08));
+    --theme-primary-new-custom-200: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
     --theme-primary-new-custom-300: rgb(calc(89.25 + var(--theme-base-primary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-b) * 0.65));
     --theme-primary-new-custom-400: var(--theme-primary-new-custom);
-    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 5%));
-    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 26%));
 }
 
 create-custom-theme-variables(primary, dark) {
     --theme-dark-primary-new-custom: hsl(var(--theme-dark-primary-color-new-h), var(--theme-dark-primary-color-new-s), var(--theme-dark-primary-color-new-l));
-    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 11%), 100%));
-    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 7%), 100%));
-    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 5%), 100%));
+    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 55%), 100%));
+    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 35%), 100%));
+    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 20%), 100%));
     --theme-dark-primary-new-custom-400: var(--theme-dark-primary-new-custom);
     --theme-dark-primary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-primary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-b) * 0.64));
-    --theme-dark-primary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-primary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-b) * 0.49));
+    --theme-dark-primary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-primary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-b) * 0.25));
 }
 
 create-custom-theme-variables(secondary, base) {
     --theme-secondary-new-custom: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), var(--theme-base-secondary-color-new-l));
-    --theme-secondary-new-custom-100: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
-    --theme-secondary-new-custom-200: rgb(calc(122.4 + var(--theme-base-secondary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-b) * 0.52));
+    --theme-secondary-new-custom-100: rgb(calc(234.6 + var(--theme-base-secondary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-b) * 0.08));
+    --theme-secondary-new-custom-200: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
     --theme-secondary-new-custom-300: rgb(calc(89.25 + var(--theme-base-secondary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-b) * 0.65));
     --theme-secondary-new-custom-400: var(--theme-secondary-new-custom);
-    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 5%));
-    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 26%));
 }
 
 create-custom-theme-variables(secondary, base) {
     --theme-secondary-new-custom: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), var(--theme-base-secondary-color-new-l));
-    --theme-secondary-new-custom-100: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
-    --theme-secondary-new-custom-200: rgb(calc(122.4 + var(--theme-base-secondary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-b) * 0.52));
+    --theme-secondary-new-custom-100: rgb(calc(234.6 + var(--theme-base-secondary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-b) * 0.08));
+    --theme-secondary-new-custom-200: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
     --theme-secondary-new-custom-300: rgb(calc(89.25 + var(--theme-base-secondary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-b) * 0.65));
     --theme-secondary-new-custom-400: var(--theme-secondary-new-custom);
-    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 5%));
-    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 26%));
 }
 "
 `;
diff --git a/lib/exports/colors-new/__snapshots__/colors.less.test.ts.snap b/lib/exports/colors-new/__snapshots__/colors.less.test.ts.snap
index f4e9ea6148..7760fe4145 100644
--- a/lib/exports/colors-new/__snapshots__/colors.less.test.ts.snap
+++ b/lib/exports/colors-new/__snapshots__/colors.less.test.ts.snap
@@ -4,6 +4,77 @@ exports[`colors > should output all the css generated by the new colors/theming
 "body {
     --_o-disabled: 0.5;
     --_o-disabled-static: 0.5;
+    --bg-new-error: var(--red-new-400);
+    --bg-new-danger: var(--red-new-400);
+    --bg-new-success: var(--green-new-400);
+    --bg-new-warning: var(--yellow-new-500);
+    --fc-new-light: var(--black-new-400);
+    --fc-new-medium: var(--black-new-500);
+    --fc-new-dark: var(--black-new-600);
+    --fc-new-error: var(--red-new-400);
+    --fc-new-danger: var(--red-new-400);
+    --fc-new-success: var(--green-new-500);
+    --fc-new-warning: var(--yellow-new-500);
+    --theme-body-font-color: var(--black-800);
+    --theme-background-color: var(--white);
+    --theme-link-color: var(--theme-secondary-400);
+    --theme-link-color-hover: var(--theme-secondary-350);
+    --theme-link-color-visited: var(--theme-secondary-700);
+    --theme-button-color: var(--theme-secondary-400);
+    --theme-button-background-color: transparent;
+    --theme-button-hover-color: var(--theme-secondary-500);
+    --theme-button-hover-background-color: var(--theme-secondary-050);
+    --theme-button-active-background-color: var(--theme-secondary-100);
+    --theme-button-selected-color: var(--theme-secondary-900);
+    --theme-button-selected-background-color: var(--theme-secondary-150);
+    --theme-button-primary-color: var(--white);
+    --theme-button-primary-background-color: var(--theme-secondary-400);
+    --theme-button-primary-hover-color: var(--white);
+    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
+    --theme-button-primary-active-background-color: var(--theme-secondary-700);
+    --theme-button-primary-selected-color: var(--white);
+    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
+    --theme-button-primary-number-color: var(--theme-secondary-900);
+    --theme-button-filled-color: var(--theme-secondary-700);
+    --theme-button-filled-background-color: var(--theme-secondary-050);
+    --theme-button-filled-border-color: var(--theme-secondary-350);
+    --theme-button-filled-hover-color: var(--theme-secondary-800);
+    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
+    --theme-button-filled-active-background-color: var(--theme-secondary-150);
+    --theme-button-filled-active-border-color: var(--theme-secondary-350);
+    --theme-button-filled-selected-color: var(--theme-secondary-900);
+    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
+    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
+    --theme-button-outlined-border-color: var(--theme-secondary-300);
+    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
+    --theme-tag-color: var(--theme-secondary-800);
+    --theme-tag-background-color: var(--theme-secondary-075);
+    --theme-tag-border-color: transparent;
+    --theme-tag-hover-color: var(--theme-secondary-900);
+    --theme-tag-hover-background-color: var(--theme-secondary-100);
+    --theme-tag-hover-border-color: transparent;
+    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
+    --theme-topbar-background-color: var(--white);
+    --theme-topbar-search-color: var(--black-700);
+    --theme-topbar-search-background: var(--white);
+    --theme-topbar-search-placeholder: var(--black-400);
+    --theme-topbar-search-border: var(--black-200);
+    --theme-topbar-search-border-focus: var(--blue-300);
+    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --theme-topbar-select-color: var(--black-700);
+    --theme-topbar-select-background: var(--black-075);
+    --theme-topbar-item-color: var(--black-600);
+    --theme-topbar-item-color-hover: var(--black-800);
+    --theme-topbar-item-background-hover: var(--black-075);
+    --theme-topbar-item-color-current: var(--black);
+    --theme-topbar-item-border-current: var(--theme-primary-color);
+    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
+    --theme-topbar-bottom-border: 1px solid var(--black-100);
+    --theme-post-title-color: var(--theme-link-color);
+    --theme-post-title-color-hover: var(--theme-link-color-hover);
+    --theme-post-title-color-visited: var(--theme-link-color-visited);
+    --theme-post-title-font-family: var(--theme-body-font-family);
+    --theme-post-body-font-family: var(--theme-body-font-family);
 }
 
 body:not(.theme-dark),
@@ -80,9 +151,6 @@ body.theme-system .theme-light__forced .themed {
     --bs-new-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
     --bs-new-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
     --bs-new-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
-    --fc-new-light: var(--black-new-400);
-    --fc-new-medium: var(--black-new-500);
-    --fc-new-dark: var(--black-new-600);
     --focus-new: hsla(206, 100%, 40%, 0.9);
     --focus-new-success: hsla(140, 40%, 75%, 0.4);
     --focus-new-warning: hsla(47, 79%, 58%, 0.4);
@@ -101,66 +169,6 @@ body.theme-system .theme-light__forced .themed {
     --highlight-new-symbol: hsl(306, 43%, 35%);
     --highlight-new-variable: hsl(80, 80.5%, 26.5%);
     --scrollbar-new: hsla(0, 0%, 0%, 0.2);
-    --theme-body-font-color: var(--black-800);
-    --theme-background-color: var(--white);
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-350);
-    --theme-link-color-visited: var(--theme-secondary-700);
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-500);
-    --theme-button-hover-background-color: var(--theme-secondary-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-150);
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-    --theme-button-primary-active-background-color: var(--theme-secondary-700);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-    --theme-button-primary-number-color: var(--theme-secondary-900);
-    --theme-button-filled-color: var(--theme-secondary-700);
-    --theme-button-filled-background-color: var(--theme-secondary-050);
-    --theme-button-filled-border-color: var(--theme-secondary-350);
-    --theme-button-filled-hover-color: var(--theme-secondary-800);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-    --theme-button-filled-active-background-color: var(--theme-secondary-150);
-    --theme-button-filled-active-border-color: var(--theme-secondary-350);
-    --theme-button-filled-selected-color: var(--theme-secondary-900);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-    --theme-button-outlined-border-color: var(--theme-secondary-300);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-    --theme-tag-color: var(--theme-secondary-800);
-    --theme-tag-background-color: var(--theme-secondary-075);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-900);
-    --theme-tag-hover-background-color: var(--theme-secondary-100);
-    --theme-tag-hover-border-color: transparent;
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
-    --theme-topbar-background-color: var(--white);
-    --theme-topbar-search-color: var(--black-700);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-200);
-    --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-    --theme-topbar-select-color: var(--black-700);
-    --theme-topbar-select-background: var(--black-075);
-    --theme-topbar-item-color: var(--black-600);
-    --theme-topbar-item-color-hover: var(--black-800);
-    --theme-topbar-item-background-hover: var(--black-075);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary-color);
-    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-    --theme-topbar-bottom-border: 1px solid var(--black-100);
-    --theme-post-title-color: var(--theme-link-color);
-    --theme-post-title-color-hover: var(--theme-link-color-hover);
-    --theme-post-title-color-visited: var(--theme-link-color-visited);
-    --theme-post-title-font-family: var(--theme-body-font-family);
-    --theme-post-body-font-family: var(--theme-body-font-family);
     --theme-primary-new: var(--theme-primary-new-custom, var(--orange-new-400));
     --theme-primary-new-100: var(--theme-primary-new-custom-100, var(--orange-new-100));
     --theme-primary-new-200: var(--theme-primary-new-custom-200, var(--orange-new-200));
@@ -176,19 +184,19 @@ body.theme-system .theme-light__forced .themed {
     --theme-secondary-new-500: var(--theme-secondary-new-custom-500, var(--blue-new-500));
     --theme-secondary-new-600: var(--theme-secondary-new-custom-600, var(--blue-new-600));
     --theme-primary-new-custom: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), var(--theme-base-primary-color-new-l));
-    --theme-primary-new-custom-100: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
-    --theme-primary-new-custom-200: rgb(calc(122.4 + var(--theme-base-primary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-primary-color-new-b) * 0.52));
+    --theme-primary-new-custom-100: rgb(calc(234.6 + var(--theme-base-primary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-primary-color-new-b) * 0.08));
+    --theme-primary-new-custom-200: rgb(calc(198.9 + var(--theme-base-primary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-primary-color-new-b) * 0.22));
     --theme-primary-new-custom-300: rgb(calc(89.25 + var(--theme-base-primary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-primary-color-new-b) * 0.65));
     --theme-primary-new-custom-400: var(--theme-primary-new-custom);
-    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 5%));
-    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-500: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 10%));
+    --theme-primary-new-custom-600: hsl(var(--theme-base-primary-color-new-h), var(--theme-base-primary-color-new-s), calc(var(--theme-base-primary-color-new-l) - 26%));
     --theme-secondary-new-custom: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), var(--theme-base-secondary-color-new-l));
-    --theme-secondary-new-custom-100: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
-    --theme-secondary-new-custom-200: rgb(calc(122.4 + var(--theme-base-secondary-color-new-r) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-g) * 0.52), calc(122.4 + var(--theme-base-secondary-color-new-b) * 0.52));
+    --theme-secondary-new-custom-100: rgb(calc(234.6 + var(--theme-base-secondary-color-new-r) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-g) * 0.08), calc(234.6 + var(--theme-base-secondary-color-new-b) * 0.08));
+    --theme-secondary-new-custom-200: rgb(calc(198.9 + var(--theme-base-secondary-color-new-r) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-g) * 0.22), calc(198.9 + var(--theme-base-secondary-color-new-b) * 0.22));
     --theme-secondary-new-custom-300: rgb(calc(89.25 + var(--theme-base-secondary-color-new-r) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-g) * 0.65), calc(89.25 + var(--theme-base-secondary-color-new-b) * 0.65));
     --theme-secondary-new-custom-400: var(--theme-secondary-new-custom);
-    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 5%));
-    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-500: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 10%));
+    --theme-secondary-new-custom-600: hsl(var(--theme-base-secondary-color-new-h), var(--theme-base-secondary-color-new-s), calc(var(--theme-base-secondary-color-new-l) - 26%));
     color: var(--theme-body-font-color-new, var(--black-new-600));
 }
 
@@ -263,9 +271,6 @@ body:not(.theme-dark) .theme-dark__forced .themed {
     --bs-new-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
     --bs-new-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
     --bs-new-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
-    --fc-new-light: var(--black-new-400);
-    --fc-new-medium: var(--black-new-500);
-    --fc-new-dark: var(--black-new-600);
     --focus-new: hsla(206, 100%, 40%, 0.9);
     --focus-new-success: hsla(140, 40%, 75%, 0.4);
     --focus-new-warning: hsla(47, 79%, 58%, 0.4);
@@ -284,66 +289,6 @@ body:not(.theme-dark) .theme-dark__forced .themed {
     --highlight-new-symbol: hsl(306, 43%, 69%);
     --highlight-new-variable: hsl(65.5, 39%, 57.5%);
     --scrollbar-new: hsla(0, 0%, 0%, 0.2);
-    --theme-body-font-color: var(--black-800);
-    --theme-background-color: var(--white);
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-350);
-    --theme-link-color-visited: var(--theme-secondary-700);
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-500);
-    --theme-button-hover-background-color: var(--theme-secondary-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-150);
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-    --theme-button-primary-active-background-color: var(--theme-secondary-700);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-    --theme-button-primary-number-color: var(--theme-secondary-900);
-    --theme-button-filled-color: var(--theme-secondary-700);
-    --theme-button-filled-background-color: var(--theme-secondary-050);
-    --theme-button-filled-border-color: var(--theme-secondary-350);
-    --theme-button-filled-hover-color: var(--theme-secondary-800);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-    --theme-button-filled-active-background-color: var(--theme-secondary-150);
-    --theme-button-filled-active-border-color: var(--theme-secondary-350);
-    --theme-button-filled-selected-color: var(--theme-secondary-900);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-    --theme-button-outlined-border-color: var(--theme-secondary-300);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-    --theme-tag-color: var(--theme-secondary-800);
-    --theme-tag-background-color: var(--theme-secondary-075);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-900);
-    --theme-tag-hover-background-color: var(--theme-secondary-100);
-    --theme-tag-hover-border-color: transparent;
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
-    --theme-topbar-background-color: var(--white);
-    --theme-topbar-search-color: var(--black-700);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-200);
-    --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-    --theme-topbar-select-color: var(--black-700);
-    --theme-topbar-select-background: var(--black-075);
-    --theme-topbar-item-color: var(--black-600);
-    --theme-topbar-item-color-hover: var(--black-800);
-    --theme-topbar-item-background-hover: var(--black-075);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary-color);
-    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-    --theme-topbar-bottom-border: 1px solid var(--black-100);
-    --theme-post-title-color: var(--theme-link-color);
-    --theme-post-title-color-hover: var(--theme-link-color-hover);
-    --theme-post-title-color-visited: var(--theme-link-color-visited);
-    --theme-post-title-font-family: var(--theme-body-font-family);
-    --theme-post-body-font-family: var(--theme-body-font-family);
     --theme-primary-new: var(--theme-dark-primary-new-custom, var(--orange-new-400));
     --theme-primary-new-100: var(--theme-dark-primary-new-custom-100, var(--orange-new-100));
     --theme-primary-new-200: var(--theme-dark-primary-new-custom-200, var(--orange-new-200));
@@ -359,19 +304,19 @@ body:not(.theme-dark) .theme-dark__forced .themed {
     --theme-secondary-new-500: var(--theme-dark-secondary-new-custom-500, var(--blue-new-500));
     --theme-secondary-new-600: var(--theme-dark-secondary-new-custom-600, var(--blue-new-600));
     --theme-dark-primary-new-custom: hsl(var(--theme-dark-primary-color-new-h), var(--theme-dark-primary-color-new-s), var(--theme-dark-primary-color-new-l));
-    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 11%), 100%));
-    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 7%), 100%));
-    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 5%), 100%));
+    --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 55%), 100%));
+    --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 35%), 100%));
+    --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 20%), 100%));
     --theme-dark-primary-new-custom-400: var(--theme-dark-primary-new-custom);
     --theme-dark-primary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-primary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-b) * 0.64));
-    --theme-dark-primary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-primary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-b) * 0.49));
+    --theme-dark-primary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-primary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-b) * 0.25));
     --theme-dark-secondary-new-custom: hsl(var(--theme-dark-secondary-color-new-h), var(--theme-dark-secondary-color-new-s), var(--theme-dark-secondary-color-new-l));
-    --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 11%), 100%));
-    --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 7%), 100%));
-    --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 5%), 100%));
+    --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 55%), 100%));
+    --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 35%), 100%));
+    --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 20%), 100%));
     --theme-dark-secondary-new-custom-400: var(--theme-dark-secondary-new-custom);
     --theme-dark-secondary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-secondary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-b) * 0.64));
-    --theme-dark-secondary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-secondary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-b) * 0.49));
+    --theme-dark-secondary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-secondary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-b) * 0.25));
     color: var(--theme-body-font-color-new, var(--black-new-600));
 }
 
@@ -444,9 +389,6 @@ body:not(.theme-dark) .theme-dark__forced .themed {
         --bs-new-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
         --bs-new-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
         --bs-new-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
-        --fc-new-light: var(--black-new-400);
-        --fc-new-medium: var(--black-new-500);
-        --fc-new-dark: var(--black-new-600);
         --focus-new: hsla(206, 100%, 40%, 0.9);
         --focus-new-success: hsla(140, 40%, 75%, 0.4);
         --focus-new-warning: hsla(47, 79%, 58%, 0.4);
@@ -465,66 +407,6 @@ body:not(.theme-dark) .theme-dark__forced .themed {
         --highlight-new-symbol: hsl(306, 43%, 69%);
         --highlight-new-variable: hsl(65.5, 39%, 57.5%);
         --scrollbar-new: hsla(0, 0%, 0%, 0.2);
-        --theme-body-font-color: var(--black-800);
-        --theme-background-color: var(--white);
-        --theme-link-color: var(--theme-secondary-400);
-        --theme-link-color-hover: var(--theme-secondary-350);
-        --theme-link-color-visited: var(--theme-secondary-700);
-        --theme-button-color: var(--theme-secondary-400);
-        --theme-button-background-color: transparent;
-        --theme-button-hover-color: var(--theme-secondary-500);
-        --theme-button-hover-background-color: var(--theme-secondary-050);
-        --theme-button-active-background-color: var(--theme-secondary-100);
-        --theme-button-selected-color: var(--theme-secondary-900);
-        --theme-button-selected-background-color: var(--theme-secondary-150);
-        --theme-button-primary-color: var(--white);
-        --theme-button-primary-background-color: var(--theme-secondary-400);
-        --theme-button-primary-hover-color: var(--white);
-        --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-        --theme-button-primary-active-background-color: var(--theme-secondary-700);
-        --theme-button-primary-selected-color: var(--white);
-        --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-        --theme-button-primary-number-color: var(--theme-secondary-900);
-        --theme-button-filled-color: var(--theme-secondary-700);
-        --theme-button-filled-background-color: var(--theme-secondary-050);
-        --theme-button-filled-border-color: var(--theme-secondary-350);
-        --theme-button-filled-hover-color: var(--theme-secondary-800);
-        --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-        --theme-button-filled-active-background-color: var(--theme-secondary-150);
-        --theme-button-filled-active-border-color: var(--theme-secondary-350);
-        --theme-button-filled-selected-color: var(--theme-secondary-900);
-        --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-        --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-        --theme-button-outlined-border-color: var(--theme-secondary-300);
-        --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-        --theme-tag-color: var(--theme-secondary-800);
-        --theme-tag-background-color: var(--theme-secondary-075);
-        --theme-tag-border-color: transparent;
-        --theme-tag-hover-color: var(--theme-secondary-900);
-        --theme-tag-hover-background-color: var(--theme-secondary-100);
-        --theme-tag-hover-border-color: transparent;
-        --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
-        --theme-topbar-background-color: var(--white);
-        --theme-topbar-search-color: var(--black-700);
-        --theme-topbar-search-background: var(--white);
-        --theme-topbar-search-placeholder: var(--black-400);
-        --theme-topbar-search-border: var(--black-200);
-        --theme-topbar-search-border-focus: var(--blue-300);
-        --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-        --theme-topbar-select-color: var(--black-700);
-        --theme-topbar-select-background: var(--black-075);
-        --theme-topbar-item-color: var(--black-600);
-        --theme-topbar-item-color-hover: var(--black-800);
-        --theme-topbar-item-background-hover: var(--black-075);
-        --theme-topbar-item-color-current: var(--black);
-        --theme-topbar-item-border-current: var(--theme-primary-color);
-        --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-        --theme-topbar-bottom-border: 1px solid var(--black-100);
-        --theme-post-title-color: var(--theme-link-color);
-        --theme-post-title-color-hover: var(--theme-link-color-hover);
-        --theme-post-title-color-visited: var(--theme-link-color-visited);
-        --theme-post-title-font-family: var(--theme-body-font-family);
-        --theme-post-body-font-family: var(--theme-body-font-family);
         --theme-primary-new: var(--theme-dark-primary-new-custom, var(--orange-new-400));
         --theme-primary-new-100: var(--theme-dark-primary-new-custom-100, var(--orange-new-100));
         --theme-primary-new-200: var(--theme-dark-primary-new-custom-200, var(--orange-new-200));
@@ -540,19 +422,19 @@ body:not(.theme-dark) .theme-dark__forced .themed {
         --theme-secondary-new-500: var(--theme-dark-secondary-new-custom-500, var(--blue-new-500));
         --theme-secondary-new-600: var(--theme-dark-secondary-new-custom-600, var(--blue-new-600));
         --theme-dark-primary-new-custom: hsl(var(--theme-dark-primary-color-new-h), var(--theme-dark-primary-color-new-s), var(--theme-dark-primary-color-new-l));
-        --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 11%), 100%));
-        --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 7%), 100%));
-        --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 5%), 100%));
+        --theme-dark-primary-new-custom-100: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 55%), 100%));
+        --theme-dark-primary-new-custom-200: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 35%), 100%));
+        --theme-dark-primary-new-custom-300: hsl(var(--theme-dark-primary-color-new-h), clamp(10%, calc(var(--theme-dark-primary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-primary-color-new-l) - 20%), 100%));
         --theme-dark-primary-new-custom-400: var(--theme-dark-primary-new-custom);
         --theme-dark-primary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-primary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-primary-color-new-b) * 0.64));
-        --theme-dark-primary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-primary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-primary-color-new-b) * 0.49));
+        --theme-dark-primary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-primary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-primary-color-new-b) * 0.25));
         --theme-dark-secondary-new-custom: hsl(var(--theme-dark-secondary-color-new-h), var(--theme-dark-secondary-color-new-s), var(--theme-dark-secondary-color-new-l));
-        --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 32%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 11%), 100%));
-        --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 15%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 7%), 100%));
-        --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 7%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 5%), 100%));
+        --theme-dark-secondary-new-custom-100: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 12%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 55%), 100%));
+        --theme-dark-secondary-new-custom-200: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 10%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 35%), 100%));
+        --theme-dark-secondary-new-custom-300: hsl(var(--theme-dark-secondary-color-new-h), clamp(10%, calc(var(--theme-dark-secondary-color-new-s) - 8%), 90%), clamp(20%, calc(var(--theme-dark-secondary-color-new-l) - 20%), 100%));
         --theme-dark-secondary-new-custom-400: var(--theme-dark-secondary-new-custom);
         --theme-dark-secondary-new-custom-500: rgb(calc(91.8 + var(--theme-dark-secondary-color-new-r) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-g) * 0.64), calc(91.8 + var(--theme-dark-secondary-color-new-b) * 0.64));
-        --theme-dark-secondary-new-custom-600: rgb(calc(130.05 + var(--theme-dark-secondary-color-new-r) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-g) * 0.49), calc(130.05 + var(--theme-dark-secondary-color-new-b) * 0.49));
+        --theme-dark-secondary-new-custom-600: rgb(calc(191.25 + var(--theme-dark-secondary-color-new-r) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-g) * 0.25), calc(191.25 + var(--theme-dark-secondary-color-new-b) * 0.25));
         color: var(--theme-body-font-color-new, var(--black-new-600));
     }
 }
@@ -625,9 +507,6 @@ body.theme-system.theme-highcontrast .theme-light__forced {
     --bs-new-md: none;
     --bs-new-lg: none;
     --bs-new-xl: none;
-    --fc-new-light: var(--black-new-400);
-    --fc-new-medium: var(--black-new-500);
-    --fc-new-dark: var(--black-new-600);
     --focus-new: hsla(206, 100%, 40%, 0.9);
     --focus-new-success: hsla(140, 40%, 40%, 0.9);
     --focus-new-warning: hsla(47, 76%, 46%, 0.9);
@@ -716,9 +595,6 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --bs-new-md: none;
     --bs-new-lg: none;
     --bs-new-xl: none;
-    --fc-new-light: var(--black-new-400);
-    --fc-new-medium: var(--black-new-500);
-    --fc-new-dark: var(--black-new-600);
     --focus-new: hsla(206, 100%, 40%, 0.9);
     --focus-new-success: hsla(140, 40%, 40%, 0.9);
     --focus-new-warning: hsla(47, 76%, 46%, 0.9);
@@ -807,9 +683,6 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --bs-new-md: none;
         --bs-new-lg: none;
         --bs-new-xl: none;
-        --fc-new-light: var(--black-new-400);
-        --fc-new-medium: var(--black-new-500);
-        --fc-new-dark: var(--black-new-600);
         --focus-new: hsla(206, 100%, 40%, 0.9);
         --focus-new-success: hsla(140, 40%, 40%, 0.9);
         --focus-new-warning: hsla(47, 76%, 46%, 0.9);
@@ -831,5 +704,49 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --_o-disabled: 0.8;
     }
 }
+
+.bg-new-error {
+    background-color: var(--bg-new-error) !important;
+}
+
+.bg-new-danger {
+    background-color: var(--bg-new-danger) !important;
+}
+
+.bg-new-success {
+    background-color: var(--bg-new-success) !important;
+}
+
+.bg-new-warning {
+    background-color: var(--bg-new-warning) !important;
+}
+
+.fc-new-light {
+    color: var(--fc-new-light) !important;
+}
+
+.fc-new-medium {
+    color: var(--fc-new-medium) !important;
+}
+
+.fc-new-dark {
+    color: var(--fc-new-dark) !important;
+}
+
+.fc-new-error {
+    color: var(--fc-new-error) !important;
+}
+
+.fc-new-danger {
+    color: var(--fc-new-danger) !important;
+}
+
+.fc-new-success {
+    color: var(--fc-new-success) !important;
+}
+
+.fc-new-warning {
+    color: var(--fc-new-warning) !important;
+}
 "
 `;
diff --git a/lib/exports/colors-new/color-mixins.less b/lib/exports/colors-new/color-mixins.less
index 24f0c06af0..a887517561 100644
--- a/lib/exports/colors-new/color-mixins.less
+++ b/lib/exports/colors-new/color-mixins.less
@@ -34,7 +34,6 @@
         & .themed {
             .create-colors(@set);
             .create-colors(@setUtility);
-            .theme-variables();
             .create-theme-variables(@mode);
             .create-custom-theme-variables(primary, @modeCustom);
             .create-custom-theme-variables(secondary, @modeCustom);
@@ -117,6 +116,36 @@
     });
 }
 
+/**
+ * Creates aliased color classes or variables.
+ *
+ * Usage example:
+ * .create-aliased-utility-colors(classes)
+ *
+ * @type - The type of output.
+ */
+.create-aliased-utility-colors(@type: variables) {
+    each(.sets-aliased-utility-classes(), .(@set, @setName, @iSet) {
+        each(@set, .(@value, @stop, @iColorValue) {
+            @suffix: if((@stop = default), "new", ~"new-@{stop}");
+            @property: if(@setName = fc, color, background-color);
+            @name: ~"@{setName}-@{suffix}";
+            @customVariable: ~"--@{name}";
+            @customValue: ~"var(@{customVariable}) !important";
+
+            & when (@type = variables) {
+                @{customVariable}: @value;
+            }
+
+            & when (@type = classes) {
+                .@{name} {
+                    @{property}: @customValue;
+                }
+            }
+        });
+    });
+}
+
 // THEMING -- PUBLIC API
 /**
  * Creates theme h/s/l and r/g/b variables based on the given color for a specified theme.
diff --git a/lib/exports/colors-new/color-sets.less b/lib/exports/colors-new/color-sets.less
index 8833f75088..fd5975807c 100644
--- a/lib/exports/colors-new/color-sets.less
+++ b/lib/exports/colors-new/color-sets.less
@@ -341,6 +341,14 @@
     darker: var(--black-new-600);
 }
 
+// background color
+.set-bg() {
+    error: var(--red-new-400);
+    danger: var(--red-new-400);
+    success: var(--green-new-400);
+    warning: var(--yellow-new-500);
+}
+
 // box-shadow
 .set-bs() {
     sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
@@ -372,6 +380,10 @@
     light: var(--black-new-400);
     medium: var(--black-new-500);
     dark: var(--black-new-600);
+    error: var(--red-new-400);
+    danger: var(--red-new-400);
+    success: var(--green-new-500);
+    warning: var(--yellow-new-500);
 }
 
 // focus (sets represents both light and dark mode)
@@ -529,7 +541,6 @@
 .sets-utility() {
     bc: .set-bc();
     bs: .set-bs();
-    fc: .set-fc();
     focus: .set-focus();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
@@ -538,7 +549,6 @@
 .sets-utility-dark() {
     bc: .set-bc();
     bs: .set-bs-dark();
-    fc: .set-fc();
     focus: .set-focus();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar();
@@ -547,7 +557,6 @@
 .sets-utility-hc() {
     bc: .set-bc-hc();
     bs: .set-bs-hc();
-    fc: .set-fc();
     focus: .set-focus-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
@@ -556,12 +565,17 @@
 .sets-utility-dark-hc() {
     bc: .set-bc-hc();
     bs: .set-bs-hc-dark();
-    fc: .set-fc();
     focus: .set-focus-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc();
 }
 
+// Utitly sets for class generation
+.sets-aliased-utility-classes() {
+    bg: .set-bg();
+    fc: .set-fc();
+}
+
 // Theme values
 // TODO update to use custom theme colors with orange/blue as fallbacks
 .set-theme-primary-default() {
diff --git a/lib/exports/colors-new/colors.less b/lib/exports/colors-new/colors.less
index 59f13b099c..e60aed4ffc 100644
--- a/lib/exports/colors-new/colors.less
+++ b/lib/exports/colors-new/colors.less
@@ -3,6 +3,8 @@
 body {
     --_o-disabled: 0.5;
     --_o-disabled-static: 0.5;
+    .create-aliased-utility-colors(variables);
+    .theme-variables();
 }
 
 // Light mode
@@ -40,3 +42,5 @@ body.theme-system.theme-highcontrast {
         .generate-colors(dark-highcontrast);
     }
 }
+
+.create-aliased-utility-colors(classes);