@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/lib/core/styles/dark.js

@@ -4,22 +4,22 @@ exports.darkMode = void 0;
 const styled_components_1 = require("styled-components");
 const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
-const variables_dark_3 = require("../../markdoc/components/ExcalidrawDiagram/variables.dark");
-const variables_dark_4 = require("../../components/Menu/variables.dark");
-const variables_dark_5 = require("../../components/Button/variables.dark");
-const variables_dark_6 = require("../../components/Buttons/variables.dark");
-const variables_dark_7 = require("../../components/Segmented/variables.dark");
-const variables_dark_8 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_9 = require("../../components/Tag/variables.dark");
-const variables_dark_10 = require("../../components/StatusCode/variables.dark");
-const variables_dark_11 = require("../../components/Switch/variables.dark");
-const variables_dark_12 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_13 = require("../../components/Catalog/variables.dark");
-const variables_dark_14 = require("../../components/PageActions/variables.dark");
-const variables_dark_15 = require("../../components/Tooltip/variables.dark");
-const variables_dark_16 = require("../../components/Banner/variables.dark");
-const variables_dark_17 = require("../../components/Admonition/variables.dark");
-const variables_dark_18 = require("../../components/SvgViewer/variables.dark");
+const variables_dark_3 = require("../../components/Menu/variables.dark");
+const variables_dark_4 = require("../../components/Button/variables.dark");
+const variables_dark_5 = require("../../components/Buttons/variables.dark");
+const variables_dark_6 = require("../../components/Segmented/variables.dark");
+const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_8 = require("../../components/Tag/variables.dark");
+const variables_dark_9 = require("../../components/StatusCode/variables.dark");
+const variables_dark_10 = require("../../components/Switch/variables.dark");
+const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_12 = require("../../components/Catalog/variables.dark");
+const variables_dark_13 = require("../../components/PageActions/variables.dark");
+const variables_dark_14 = require("../../components/Tooltip/variables.dark");
+const variables_dark_15 = require("../../components/Banner/variables.dark");
+const variables_dark_16 = require("../../components/Admonition/variables.dark");
+const variables_dark_17 = require("../../components/SvgViewer/variables.dark");
+const palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -265,6 +265,11 @@ exports.darkMode = (0, styled_components_1.css) `
   --layer-accent-hover: var(--color-warm-grey-10);
   --layer-color-raised: var(--color-warm-grey-3);
 
+  --color-brand-subtle-bg: var(--color-brand-subtle-1);
+  --color-brand-subtle-bg-hover: var(--color-brand-subtle-2);
+  --color-brand-subtle-border: var(--color-brand-subtle-3);
+  --color-brand-subtle-border-hover: var(--color-brand-subtle-4);
+
   /**
     * @tokens Border Colors
     * @presenter Color
@@ -328,27 +333,26 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_7.segmentedButtonsDarkMode}
-  ${variables_dark_5.buttonDarkMode}
-  ${variables_dark_6.aiAssistantButtonDarkMode}
-  ${variables_dark_8.checkboxDarkMode}
-  ${variables_dark_9.tagDarkMode}
-  ${variables_dark_10.statusCodeDarkMode}
-  ${variables_dark_4.menuDarkMode}
+  ${variables_dark_6.segmentedButtonsDarkMode}
+  ${variables_dark_4.buttonDarkMode}
+  ${variables_dark_5.aiAssistantButtonDarkMode}
+  ${variables_dark_7.checkboxDarkMode}
+  ${variables_dark_8.tagDarkMode}
+  ${variables_dark_9.statusCodeDarkMode}
+  ${variables_dark_3.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
-  ${variables_dark_3.excalidrawDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_11.switcherDarkMode}
-  ${variables_dark_12.cardsDarkMode}
-  ${variables_dark_13.catalogDarkMode}
-  ${variables_dark_14.pageActionsDarkMode}
-  ${variables_dark_15.tooltipDarkMode}
-  ${variables_dark_16.bannerDarkMode}
-  ${variables_dark_17.admonitionDarkMode}
-  ${variables_dark_18.svgViewerDarkMode}
+  ${variables_dark_10.switcherDarkMode}
+  ${variables_dark_11.cardsDarkMode}
+  ${variables_dark_12.catalogDarkMode}
+  ${variables_dark_13.pageActionsDarkMode}
+  ${variables_dark_14.tooltipDarkMode}
+  ${variables_dark_15.bannerDarkMode}
+  ${variables_dark_16.admonitionDarkMode}
+  ${variables_dark_17.svgViewerDarkMode}
   ${badgesDarkMode}
-
+  ${palette_dark_1.activeBrandPaletteDark}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/lib/core/styles/global.d.ts

@@ -1,2 +1,6 @@
-export declare const styles: import("styled-components").FlattenSimpleInterpolation;
-export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;
+export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{
+    palette?: string;
+}, import("styled-components").DefaultTheme>;

package/lib/core/styles/global.js

@@ -31,21 +31,22 @@ const variables_26 = require("../../components/Markdown/variables");
 const variables_27 = require("../../components/Banner/variables");
 const variables_28 = require("../../markdoc/components/Tabs/variables");
 const variables_29 = require("../../markdoc/components/Mermaid/variables");
-const variables_30 = require("../../markdoc/components/ExcalidrawDiagram/variables");
-const variables_31 = require("../../components/LastUpdated/variables");
-const variables_32 = require("../../components/Logo/variables");
-const variables_33 = require("../../components/StatusCode/variables");
-const variables_34 = require("../../components/Segmented/variables");
-const variables_35 = require("../../components/UserMenu/variables");
-const variables_36 = require("../../components/Tags/variables");
-const variables_37 = require("../../components/VersionPicker/variables");
-const variables_38 = require("../../components/DatePicker/variables");
-const variables_39 = require("../../components/Switch/variables");
-const variables_40 = require("../../markdoc/components/Cards/variables");
-const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_42 = require("../../components/SkipContent/variables");
-const variables_43 = require("../../components/PageActions/variables");
-const variables_44 = require("../../components/SvgViewer/variables");
+const variables_30 = require("../../components/LastUpdated/variables");
+const variables_31 = require("../../components/Logo/variables");
+const variables_32 = require("../../components/StatusCode/variables");
+const variables_33 = require("../../components/Segmented/variables");
+const variables_34 = require("../../components/UserMenu/variables");
+const variables_35 = require("../../components/Tags/variables");
+const variables_36 = require("../../components/VersionPicker/variables");
+const variables_37 = require("../../components/DatePicker/variables");
+const variables_38 = require("../../components/Switch/variables");
+const variables_39 = require("../../markdoc/components/Cards/variables");
+const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_41 = require("../../components/SkipContent/variables");
+const variables_42 = require("../../components/PageActions/variables");
+const variables_43 = require("../../components/SvgViewer/variables");
+const variables_44 = require("../../components/Toast/variables");
+const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -226,17 +227,6 @@ const themeColors = (0, styled_components_1.css) `
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-blueberry-1);
-  --color-primary-bg-hover: var(--color-blueberry-2);
-  --color-primary-border: var(--color-blueberry-3);
-  --color-primary-border-hover: var(--color-blueberry-4);
-  --color-primary-hover: var(--color-blueberry-5);
-  --color-primary-base: var(--color-blueberry-6);
-  --color-primary-active: var(--color-blueberry-7);
-  --color-primary-text-hover: var(--color-blueberry-8);
-  --color-primary-text: var(--color-blueberry-9);
-  --color-primary-text-active: var(--color-blueberry-10);
-
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
   --color-success-border: var(--color-green-3);
@@ -281,6 +271,18 @@ const themeColors = (0, styled_components_1.css) `
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);
 
+  --color-primary-bg: var(--color-brand-1); // @presenter Color
+  --color-primary-bg-hover: var(--color-brand-2); // @presenter Color
+  --color-primary-border: var(--color-brand-3); // @presenter Color
+  --color-primary-border-hover: var(--color-brand-4); // @presenter Color
+  --color-primary-hover: var(--color-brand-8); // @presenter Color
+  --color-primary-base: var(--color-brand-6); // @presenter Color
+  --color-primary-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-hover: var(--color-brand-9); // @presenter Color
+  --color-primary-text: var(--color-brand-8); // @presenter Color
+  --color-primary-text-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-on-color: var(--text-color-on-color); // @presenter Color
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
@@ -756,24 +758,24 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-chevron-color: var(--text-color-secondary); // @presenter Color
   --schema-chevron-size: 9px;
 
-  --schema-property-deep-link-icon-color: var(--color-primary-base); // @presenter Color
+  --schema-property-deep-link-icon-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --schema-property-deep-link-icon: none;
 
   /**
     * @tokens API Reference Other
     */
 
-  --loading-spinner-color: var(--color-primary-base); // @presenter Color
+  --loading-spinner-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --linear-progress-color: var(--color-info-base); // @presenter Color
   --linear-progress-bg-color: var(--color-info-bg); // @presenter Color
 
-  --fab-bg-color: var(--color-primary-base); // @presenter Color
+  --fab-bg-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-hover: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-hover: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-hover: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-active: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-active: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-active: var(--bg-raised-shadow); // @presenter Shadow
 
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
@@ -1236,6 +1238,13 @@ const replay = (0, styled_components_1.css) `
   --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
 
   --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
+
+  --replay-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --replay-transition-duration: 300ms;
+
+  @media (prefers-reduced-motion: reduce) {
+    --replay-transition-duration: 0s;
+  }
   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `
@@ -1251,28 +1260,27 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_40.cards}
+    ${variables_39.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_41.codeWalkthrough}
+    ${variables_40.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_36.httpTag}
+    ${variables_35.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_31.lastUpdated}
+    ${variables_30.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_32.logo}
+    ${variables_31.logo}
     ${variables_26.markdown}
     ${variables_28.markdownTabs}
     ${variables_29.mermaid}
-    ${variables_30.excalidraw}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1286,28 +1294,30 @@ exports.styles = (0, styled_components_1.css) `
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
+    ${palette_1.activeBrandPaletteLight}
     ${tile}
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_35.userMenu}
-    ${variables_37.versionPicker}
+    ${variables_34.userMenu}
+    ${variables_36.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_33.statusCode}
+    ${variables_32.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_34.segmented}
-    ${variables_39.switcher}
+    ${variables_33.segmented}
+    ${variables_38.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_38.datePicker}
+    ${variables_37.datePicker}
     ${replay}
-    ${variables_42.skipContent}
-    ${variables_43.pageActions}
-    ${variables_44.svgViewer}
+    ${variables_41.skipContent}
+    ${variables_42.pageActions}
+    ${variables_43.svgViewer}
+    ${variables_44.toast}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/core/styles/palette.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @tokens Palette
+ */
+export declare const activeBrandPaletteLight: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;

package/lib/core/styles/palette.dark.d.ts

@@ -0,0 +1,3 @@
+export declare const activeBrandPaletteDark: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;

package/lib/core/styles/palette.dark.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activeBrandPaletteDark = void 0;
+const styled_components_1 = require("styled-components");
+function brandPaletteDark(palette) {
+    switch (palette) {
+        case 'slate':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #2a2b33;
+        --color-brand-2: #3b3c45;
+        --color-brand-3: #555761;
+        --color-brand-4: #6e6f7a;
+        --color-brand-5: #9b9ca8;
+        --color-brand-6: #fbfbfc;
+        --color-brand-7: #ededf2;
+        --color-brand-8: #dcdde5;
+        --color-brand-9: #c4c6d1;
+        --color-brand-10: #9b9ca8;
+        --color-brand-11: #6e6f7a;
+        --color-brand-subtle-1: #2a2b3366;
+        --color-brand-subtle-2: #3b3c4566;
+        --color-brand-subtle-3: #55576166;
+        --color-brand-subtle-4: #6e6f7a66;
+        --text-color-on-color: #000000;
+      `;
+        case 'pink':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f2841;
+        --color-brand-2: #6a3055;
+        --color-brand-3: #853668;
+        --color-brand-4: #a03a7b;
+        --color-brand-5: #bb3d8d;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #de59ad;
+        --color-brand-8: #e677bd;
+        --color-brand-9: #ef99cf;
+        --color-brand-10: #f7bfe2;
+        --color-brand-11: #ffe8f7;
+        --color-brand-subtle-1: #4f284166;
+        --color-brand-subtle-2: #6a305566;
+        --color-brand-subtle-3: #85366866;
+        --color-brand-subtle-4: #a03a7b66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'coral':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f282b;
+        --color-brand-2: #6d3338;
+        --color-brand-3: #8b3c42;
+        --color-brand-4: #a9434c;
+        --color-brand-5: #c74b55;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #ea6a75;
+        --color-brand-8: #ef858d;
+        --color-brand-9: #f5a3aa;
+        --color-brand-10: #fac5c9;
+        --color-brand-11: #ffe8ea;
+        --color-brand-subtle-1: #4f282b66;
+        --color-brand-subtle-2: #6d333866;
+        --color-brand-subtle-3: #8b3c4266;
+        --color-brand-subtle-4: #a9434c66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'amber':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f3c28;
+        --color-brand-2: #71512e;
+        --color-brand-3: #93632f;
+        --color-brand-4: #b6732a;
+        --color-brand-5: #d88121;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #fb9f3a;
+        --color-brand-8: #fcb261;
+        --color-brand-9: #fdc78c;
+        --color-brand-10: #feddba;
+        --color-brand-11: #fff4e8;
+        --color-brand-subtle-1: #4f3c2866;
+        --color-brand-subtle-2: #71512e66;
+        --color-brand-subtle-3: #93632f66;
+        --color-brand-subtle-4: #b6732a66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'jade':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #284f45;
+        --color-brand-2: #2a6052;
+        --color-brand-3: #2b715e;
+        --color-brand-4: #2b816b;
+        --color-brand-5: #2a9277;
+        --color-brand-6: #29a383;
+        --color-brand-7: #42b597;
+        --color-brand-8: #61c8ad;
+        --color-brand-9: #88dac4;
+        --color-brand-10: #b5edde;
+        --color-brand-11: #e8fff9;
+        --color-brand-subtle-1: #284f4566;
+        --color-brand-subtle-2: #2a605266;
+        --color-brand-subtle-3: #2b715e66;
+        --color-brand-subtle-4: #2b816b66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'cyan':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #28484f;
+        --color-brand-2: #285c67;
+        --color-brand-3: #246e7f;
+        --color-brand-4: #1b8097;
+        --color-brand-5: #0f91af;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #22b2d2;
+        --color-brand-8: #4ac2dd;
+        --color-brand-9: #79d4e9;
+        --color-brand-10: #aee7f4;
+        --color-brand-11: #e8fbff;
+        --color-brand-subtle-1: #28484f66;
+        --color-brand-subtle-2: #285c6766;
+        --color-brand-subtle-3: #246e7f66;
+        --color-brand-subtle-4: #1b809766;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'ocean':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #283e4f;
+        --color-brand-2: #2d5472;
+        --color-brand-3: #2a6795;
+        --color-brand-4: #2277b9;
+        --color-brand-5: #1384dc;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #29a2ff;
+        --color-brand-8: #56b5ff;
+        --color-brand-9: #85caff;
+        --color-brand-10: #b6dfff;
+        --color-brand-11: #e8f5ff;
+        --color-brand-subtle-1: #283e4f66;
+        --color-brand-subtle-2: #2d547266;
+        --color-brand-subtle-3: #2a679566;
+        --color-brand-subtle-4: #2277b966;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'indigo':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #28314f;
+        --color-brand-2: #303e6b;
+        --color-brand-3: #364988;
+        --color-brand-4: #3952a4;
+        --color-brand-5: #3c5bc1;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #5879e4;
+        --color-brand-8: #7691eb;
+        --color-brand-9: #99aef1;
+        --color-brand-10: #bfcdf8;
+        --color-brand-11: #e8edff;
+        --color-brand-subtle-1: #28314f66;
+        --color-brand-subtle-2: #303e6b66;
+        --color-brand-subtle-3: #36498866;
+        --color-brand-subtle-4: #3952a466;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'iris':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #2e2e4f;
+        --color-brand-2: #3a3a6a;
+        --color-brand-3: #434385;
+        --color-brand-4: #4c4ca0;
+        --color-brand-5: #5353bb;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #7070de;
+        --color-brand-8: #8a8ae6;
+        --color-brand-9: #a7a7ef;
+        --color-brand-10: #c8c8f7;
+        --color-brand-11: #ebebff;
+        --color-brand-subtle-1: #2e2e4f80;
+        --color-brand-subtle-2: #3a3a6a80;
+        --color-brand-subtle-3: #43438580;
+        --color-brand-subtle-4: #4c4ca080;
+        --text-color-on-color: #ffffff;
+      `;
+        default:
+            return (0, styled_components_1.css) `
+        --button-bg-color-primary-hover-legacy: var(--color-blue-5);
+        --button-bg-color-primary-pressed-legacy: var(--color-blue-4);
+
+        --toc-item-text-color-active-legacy: var(--text-color-primary); 
+        --toc-item-border-color-active-legacy: var(--border-color-invers);
+
+        --checkbox-border-color-legacy: var(--border-color-primary);
+        
+        --switch-bg-color-selected-legacy: var(--color-warm-grey-7);
+        --switch-border-color-selected-legacy: var(--color-warm-grey-7);
+
+        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active);
+
+        --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
+        --admonition-default-border-color-legacy: var(--color-warm-grey-5);
+      `;
+    }
+}
+exports.activeBrandPaletteDark = (0, styled_components_1.css) `
+  ${({ palette }) => brandPaletteDark(palette)}
+`;
+//# sourceMappingURL=palette.dark.js.map