@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/lib/core/styles/global.js

@@ -31,20 +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("../../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_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 palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -225,16 +227,22 @@ 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-primary-bg: var(--color-brand-1);
+  --color-primary-bg-hover: var(--color-brand-2);
+  --color-primary-border: var(--color-brand-3);
+  --color-primary-border-hover: var(--color-brand-4);
+  --color-primary-hover: var(--color-brand-8);
+  --color-primary-base: var(--color-brand-6);
+  --color-primary-active: var(--color-brand-7);
+  --color-primary-text-hover: var(--color-brand-9);
+  --color-primary-text: var(--color-brand-8);
+  --color-primary-text-active: var(--color-brand-7);
+  --color-primary-text-on-color: var(--text-color-on-color);
+
+  --color-brand-pink-subtle-bg: var(--color-brand-1);
+  --color-brand-pink-subtle-bg-hover: var(--color-brand-2);
+  --color-brand-pink-subtle-border: var(--color-brand-3);
+  --color-brand-pink-subtle-border-hover: var(--color-brand-4);
 
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
@@ -1148,7 +1156,7 @@ const icon = (0, styled_components_1.css) `
 
   --icon-color-primary: var(--color-warm-grey-11); // @presenter Color
   --icon-color-secondary: var(--color-warm-grey-8); // @presenter Color
-  --icon-color-on-color: var(--color-warm-grey-1); // @presenter Color
+  --icon-color-on-color: var(--color-static-white); // @presenter Color
   --icon-color-interactive: var(--color-blueberry-6); // @presenter Color
   --icon-color-inverse: var(--color-white); // @presenter Color
   --icon-color-disabled: var(--color-warm-grey-5); // @presenter Color
@@ -1230,6 +1238,11 @@ const replay = (0, styled_components_1.css) `
   --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
   --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
 
+  --replay-ai-gradient-soft: linear-gradient(62.6deg, rgba(113, 94, 254, 0.16) 0%, rgba(255, 92, 220, 0.16) 100%);
+  --replay-ai-gradient-disabled: linear-gradient(62.6deg, rgba(113, 94, 254, 0.6) 0%, rgba(255, 92, 220, 0.6) 100%);
+  --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;
   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `
@@ -1245,27 +1258,28 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_39.cards}
+    ${variables_40.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_40.codeWalkthrough}
+    ${variables_41.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_35.httpTag}
+    ${variables_36.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_30.lastUpdated}
+    ${variables_31.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_31.logo}
+    ${variables_32.logo}
     ${variables_26.markdown}
     ${variables_28.markdownTabs}
     ${variables_29.mermaid}
+    ${variables_30.excalidraw}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1279,28 +1293,29 @@ exports.styles = (0, styled_components_1.css) `
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
+    ${palette_1.activeBrandPaletteLight}
     ${tile}
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_34.userMenu}
-    ${variables_36.versionPicker}
+    ${variables_35.userMenu}
+    ${variables_37.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_32.statusCode}
+    ${variables_33.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_33.segmented}
-    ${variables_38.switcher}
+    ${variables_34.segmented}
+    ${variables_39.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_37.datePicker}
+    ${variables_38.datePicker}
     ${replay}
-    ${variables_41.skipContent}
-    ${variables_42.pageActions}
-    ${variables_43.svgViewer}
+    ${variables_42.skipContent}
+    ${variables_43.pageActions}
+    ${variables_44.svgViewer}
 
     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,216 @@
+"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 'default':
+            return (0, styled_components_1.css) `
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+        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) `
+        --color-brand-1: #232a61;
+        --color-brand-2: #222d7a;
+        --color-brand-3: #1e2f93;
+        --color-brand-4: #2f46b7;
+        --color-brand-5: #4561db;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #87a3ff;
+        --color-brand-8: #9fb7ff;
+        --color-brand-9: #bfd0ff;
+        --color-brand-10: #dfe8ff;
+        --color-brand-11: #f0f4ff;
+        --color-brand-subtle-1: #232a6166;
+        --color-brand-subtle-2: #222d7a66;
+        --color-brand-subtle-3: #1e2f9366;
+        --color-brand-subtle-4: #2f46b766;
+        --text-color-on-color: #ffffff;
+      `;
+    }
+}
+exports.activeBrandPaletteDark = (0, styled_components_1.css) `
+  ${({ palette }) => brandPaletteDark(palette)}
+`;
+//# sourceMappingURL=palette.dark.js.map

package/lib/core/styles/palette.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activeBrandPaletteLight = void 0;
+const styled_components_1 = require("styled-components");
+function brandPaletteLight(palette) {
+    switch (palette) {
+        case 'default':
+            return (0, styled_components_1.css) `
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+        case 'slate':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ededf2;
+        --color-brand-2: #dcdde5;
+        --color-brand-3: #c4c6d1;
+        --color-brand-4: #9b9ca8;
+        --color-brand-5: #6e6f7a;
+        --color-brand-6: #1a1c21;
+        --color-brand-7: #22242b;
+        --color-brand-8: #2a2b33;
+        --color-brand-9: #3b3c45;
+        --color-brand-10: #555761;
+        --color-brand-11: #6e6f7a;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'pink':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ffe8f7;
+        --color-brand-2: #f7bfe2;
+        --color-brand-3: #ef99cf;
+        --color-brand-4: #e677bd;
+        --color-brand-5: #de59ad;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #bb3d8d;
+        --color-brand-8: #a03a7b;
+        --color-brand-9: #853668;
+        --color-brand-10: #6a3055;
+        --color-brand-11: #4f2841;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'coral':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ffe8ea;
+        --color-brand-2: #fac5c9;
+        --color-brand-3: #f5a3aa;
+        --color-brand-4: #ef858d;
+        --color-brand-5: #ea6a75;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #c74b55;
+        --color-brand-8: #a9434c;
+        --color-brand-9: #8b3c42;
+        --color-brand-10: #6d3338;
+        --color-brand-11: #4f282b;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'amber':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #fff4e8;
+        --color-brand-2: #feddba;
+        --color-brand-3: #fdc78c;
+        --color-brand-4: #fcb261;
+        --color-brand-5: #fb9f3a;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #d88121;
+        --color-brand-8: #b6732a;
+        --color-brand-9: #93632f;
+        --color-brand-10: #71512e;
+        --color-brand-11: #4f3c28;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'jade':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8fff9;
+        --color-brand-2: #b5edde;
+        --color-brand-3: #88dac4;
+        --color-brand-4: #61c8ad;
+        --color-brand-5: #42b597;
+        --color-brand-6: #29a383;
+        --color-brand-7: #2a9277;
+        --color-brand-8: #2b816b;
+        --color-brand-9: #2b715e;
+        --color-brand-10: #2a6052;
+        --color-brand-11: #284f45;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'cyan':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8fbff;
+        --color-brand-2: #aee7f4;
+        --color-brand-3: #79d4e9;
+        --color-brand-4: #4ac2dd;
+        --color-brand-5: #22b2d2;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #0f91af;
+        --color-brand-8: #1b8097;
+        --color-brand-9: #246e7f;
+        --color-brand-10: #285c67;
+        --color-brand-11: #28484f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'ocean':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8f5ff;
+        --color-brand-2: #b6dfff;
+        --color-brand-3: #85caff;
+        --color-brand-4: #56b5ff;
+        --color-brand-5: #29a2ff;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #1384dc;
+        --color-brand-8: #2277b9;
+        --color-brand-9: #2a6795;
+        --color-brand-10: #2d5472;
+        --color-brand-11: #283e4f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'indigo':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8edff;
+        --color-brand-2: #b5d7ff;
+        --color-brand-3: #99aef1;
+        --color-brand-4: #7691eb;
+        --color-brand-5: #5879e4;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #3c5bc1;
+        --color-brand-8: #3952a4;
+        --color-brand-9: #364988;
+        --color-brand-10: #303e6b;
+        --color-brand-11: #28314f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'iris':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ebebff;
+        --color-brand-2: #c8c8f7;
+        --color-brand-3: #a7a7ef;
+        --color-brand-4: #8a8ae6;
+        --color-brand-5: #7070de;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #5353bb;
+        --color-brand-8: #4c4ca0;
+        --color-brand-9: #434385;
+        --color-brand-10: #3a3a6a;
+        --color-brand-11: #2e2e4f;
+        --text-color-on-color: #ffffff;
+      `;
+        default:
+            return (0, styled_components_1.css) `
+        --color-brand-1: #f0f4ff;
+        --color-brand-2: #dfe8ff;
+        --color-brand-3: #bfd0ff;
+        --color-brand-4: #9fb7ff;
+        --color-brand-5: #87a3ff;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #4561db;
+        --color-brand-8: #2f46b7;
+        --color-brand-9: #1e2f93;
+        --color-brand-10: #222d7a;
+        --color-brand-11: #232a61;
+        --text-color-on-color: #ffffff;
+      `;
+    }
+}
+/**
+ * @tokens Palette
+ */
+exports.activeBrandPaletteLight = (0, styled_components_1.css) `
+  ${({ palette }) => brandPaletteLight(palette)}
+`;
+//# sourceMappingURL=palette.js.map

package/lib/core/types/catalog.d.ts

@@ -2,7 +2,6 @@ import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { ENTITY_RELATION_TYPES } from '@redocly/config';
 import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
-export type SortOption = 'title' | '-title' | 'type' | '-type';
 export type FilterResult = {
     value: string;
     count: number;
@@ -20,8 +19,8 @@ export type UseCatalogResponse = {
     filterQuery: string;
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (option: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (option: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     viewMode: CatalogViewMode;
@@ -34,8 +33,8 @@ export type UseCatalogResponse = {
     collapsedSidebar: boolean;
 };
 export type UseCatalogSortResponse = {
-    sortOption: SortOption | null;
-    setSortOption: (option: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (option: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -134,8 +133,8 @@ export type BffCatalogRelatedEntity = {
     metadata?: Record<string, any>;
     version?: string | null;
     revision?: string | null;
-    readonly createdAt: string | null;
-    readonly updatedAt: string | null;
+    readonly createdAt: string;
+    readonly updatedAt: string;
 };
 export type BffCatalogEntity = {
     readonly id: string;
@@ -220,3 +219,20 @@ export type SidebarConnectedEntity = {
     key: string;
     version?: string;
 };
+export type CatalogEntityPageProps = {
+    status: 'success';
+    entity: BffCatalogEntity;
+    relatedEntity: BffCatalogRelatedEntity | null;
+    relations: BffCatalogRelatedEntityList;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    sharedDataIds?: Record<string, string>;
+};
+export type CatalogEntityProps = {
+    RedocSchema: React.ComponentType<any>;
+    StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
+};

package/lib/core/types/hooks.d.ts

@@ -1,11 +1,12 @@
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { BannerConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, SortOption } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
@@ -65,7 +66,7 @@ export type ThemeHooks = {
         currentItemSiblings?: BreadcrumbItem[];
     };
     useBanner: () => {
-        banner: BannerConfig | undefined;
+        banner: ResolvedBannerConfig | undefined;
         dismissBanner: (content: string) => void;
     };
     useSearch: (product?: string, autoSearchDisabled?: boolean) => {
@@ -111,6 +112,7 @@ export type ThemeHooks = {
         contentSegments: ContentSegment[];
     };
     useMarkdownText: (text: string) => React.ReactNode;
+    useMarkdocRenderer: (ast: unknown) => React.ReactNode;
     useFacetQuery: (field: string) => {
         searchFacet: SearchFacet | null;
         setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
@@ -137,7 +139,7 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
     useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-    useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
+    useCatalogSort: (defaultSortOption?: string | null) => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity>;
     useFetchCatalogEntitiesRelations: (params: CatalogApiParams & {

package/lib/icons/ColorPaletteIcon/ColorPaletteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ColorPaletteIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;